Merge pull request #45 from SmartCityFlensburg/feature/add-advantages…

…-section

feat: add advantages section

src/json/logoAnimation.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":"logo-large-color.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-11T18:39:23.721Z"}},"nm":"logo-large-color","ddd":0,"assets":[],"w":285,"h":62,"ip":0,"op":800,"fr":100,"fonts":{"list":[]},"layers":[{"ty":4,"st":0,"ip":0,"op":800,"ks":{"a":{"a":0,"k":[254.997001,29.98575]},"p":{"a":0,"k":[254.997002,29.985751]}},"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[255.005,30],[284.992,0.48],[255.005,30]],"i":[[0,0],[-26.486,0],[24.279,0]],"o":[[0,-12.9596],[-0.482,15.52],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":1,"k":[{"t":0,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":390,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":409.99999999999994,"s":[0.396078,0.596078,0.345098],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":780,"s":[0.396078,0.596078,0.345098],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":800,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[269.998505,15.24]},"p":{"a":0,"k":[269.998505,15.24]}}]},{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[225.002,0.508475],[254.99,28.6017],[255.005,30],[255.99,30],[284.977,59.4915],[254.99,31.3983],[225.002,59.4915],[253.99,30],[225.002,0.508475]],"i":[[0,0],[0,-13.7284],[0,0],[0,0],[-0.133,-13.6187],[0,13.7284],[24.58,-0.0007],[-24.279,0],[0.134,13.618725]],"o":[[24.58,0.000754],[0,0],[0,0],[24.279,0],[-24.579,-0.0007],[0,13.7284],[0.134,-13.6187],[-24.279,0],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":1,"k":[{"t":0,"s":[0.396078,0.596078,0.345098],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":390,"s":[0.396078,0.596078,0.345098],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":409.99999999999994,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":780,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":800,"s":[0.396078,0.596078,0.345098],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[254.989494,29.999987]},"p":{"a":0,"k":[254.989495,29.999987]}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ty":4,"st":0,"ip":0,"op":800,"ks":{"a":{"a":0,"k":[29.98995,32]},"p":{"a":0,"k":[29.98995,32]}},"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"el","p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[24.9916,25]}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":1,"k":[{"t":0,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":390,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":409.99999999999994,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":780,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":800,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[-0.000001,0]},"p":{"a":0,"k":[30.489799,31.5]}}]},{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[29.9899,62],[59.9799,32],[29.9899,2],[0,32],[29.9899,62],[30.4898,54],[52.9822,31.5],[30.4898,9],[7.99732,31.5],[30.4898,54]],"i":[[0,0],[0,16.5685],[16.563,0],[0,-16.5685],[-16.5629,0],[0,0],[0,12.4264],[12.4222,0],[0,-12.4264],[-12.4223,0]],"o":[[16.563,0],[0,-16.5685],[-16.5629,0],[0,16.5685],[0,0],[12.4222,0],[0,-12.4264],[-12.4223,0],[0,12.4264],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":1,"k":[{"t":0,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":390,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":409.99999999999994,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":780,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":800,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]},"r":2},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[29.98995,32]},"p":{"a":0,"k":[29.98995,32]}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ty":4,"st":0,"ip":0,"op":800,"ks":{"a":{"a":0,"k":[179.990005,30.5]},"p":{"a":0,"k":[179.990006,30.5]}},"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[156.234,35.7305],[150,38],[150,29],[149.966,29.0017],[150.933,28.457],[153.606,26.0742],[153.947,25.748],[158.307,22.1276],[164.995,20],[175.393,25.5283],[175.706,25.8499],[179.99,29],[184.274,25.8499],[184.587,25.5283],[194.985,20],[201.673,22.1276],[206.033,25.748],[206.374,26.0741],[209.047,28.457],[210.014,29.0017],[209.98,29],[209.98,38],[203.746,35.7305],[200.178,32.6031],[199.812,32.252],[196.785,29.6849],[194.985,29],[190.701,32.1501],[190.388,32.4717],[179.99,38],[169.592,32.4717],[169.279,32.1501],[164.995,29],[163.195,29.6849],[160.168,32.252],[159.802,32.603],[156.234,35.7305]],"i":[[0,0],[2.632,0],[0,0],[0,0.0001],[-0.687,0.501],[-1.106,1.0592],[-0.117,0.1118],[-1.707,1.1041],[-2.69,0],[-1.933,-1.9902],[-0.1,-0.1017],[-0.861,0],[-2.548,2.5993],[-0.109,0.1124],[-5.028,0],[-1.756,-1.1353],[-1.161,-1.1102],[-0.111,-0.1056],[-0.775,-0.5647],[0,-0.0003],[0.022,0],[0,0],[1.487,1.0836],[1.011,0.9716],[0.118,0.1127],[0.902,0.5834],[0.396,0],[2.548,-2.5993],[0.109,-0.1124],[5.028,0],[1.933,1.9902],[0.1,0.1017],[0.861,0],[0.853,-0.5522],[1.191,-1.1398],[0.126,-0.121],[1.301,-0.9484]],"o":[[-1.487,1.0836],[0,0],[-0.023,0],[0,-0.0003],[0.775,-0.5647],[0.11,-0.1057],[1.16,-1.1102],[1.755,-1.1353],[5.028,0],[0.109,0.1124],[2.548,2.5993],[0.861,0],[0.1,-0.1017],[1.933,-1.9902],[2.69,0],[1.707,1.1041],[0.117,0.1118],[1.105,1.0593],[0.687,0.501],[0,0.0001],[0,0],[-2.632,0],[-1.301,-0.9484],[-0.126,-0.1211],[-1.191,-1.1398],[-0.854,-0.5522],[-0.861,0],[-0.1,0.1017],[-1.934,1.9902],[-5.028,0],[-0.109,-0.1124],[-2.548,-2.5993],[-0.396,0],[-0.903,0.5834],[-0.118,0.1127],[-1.011,0.9717],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":1,"k":[{"t":0,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":390,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":409.99999999999994,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":780,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":800,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]},"r":2},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[179.990005,29]},"p":{"a":0,"k":[179.990005,29]}}]},{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[156.03,15.5269],[150,17.5],[150,8.5],[151.137,7.97314],[153.801,5.86196],[154.142,5.57162],[154.262,5.46984],[164.995,0.5],[175.226,5.4029],[175.515,5.66646],[179.99,8.5],[184.465,5.66646],[184.754,5.4029],[194.985,0.5],[205.718,5.46985],[205.838,5.57162],[206.179,5.86193],[208.843,7.97314],[209.98,8.5],[209.98,17.5],[203.95,15.5269],[200.373,12.74],[200.008,12.4284],[194.985,9.5],[190.51,12.3335],[190.221,12.5971],[179.99,17.5],[169.759,12.5971],[169.47,12.3335],[164.995,9.5],[159.972,12.4284],[159.607,12.74],[156.03,15.5269]],"i":[[0,0],[2.479,0],[0,0],[-0.807,0.52293],[-1.105,0.94101],[-0.117,0.09956],[-0.04,0.03438],[-4.892,0],[-1.989,-1.81603],[-0.093,-0.08428],[-1.069,0],[-2.469,2.23841],[-0.1,0.09125],[-4.86,0],[-2.172,-1.84774],[-0.04,-0.03346],[-0.111,-0.09403],[-0.772,-0.50023],[-0.02,0],[0,0],[1.508,0.977],[1.011,0.8643],[0.118,0.1],[1.189,0],[2.469,-2.2384],[0.1,-0.0912],[4.86,0],[1.989,1.816],[0.093,0.0843],[1.068,0],[2.55,-2.1678],[0.125,-0.1075],[1.304,-0.8448]],"o":[[-1.508,0.977],[0,0],[0.02,0],[0.772,-0.50023],[0.111,-0.09404],[0.04,-0.03346],[2.171,-1.84773],[4.86,0],[0.1,0.09124],[2.469,2.23841],[1.068,0],[0.093,-0.08428],[1.989,-1.81602],[4.892,0],[0.04,0.03437],[0.117,0.09954],[1.105,0.94102],[0.807,0.52293],[0,0],[-2.479,0],[-1.304,-0.8448],[-0.126,-0.1074],[-2.55,-2.1678],[-1.069,0],[-0.093,0.0843],[-1.989,1.816],[-4.86,0],[-0.1,-0.0912],[-2.469,-2.2384],[-1.189,0],[-0.118,0.1],[-1.012,0.8643],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":1,"k":[{"t":0,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":390,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":409.99999999999994,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":780,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":800,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]},"r":2},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[179.989998,9]},"p":{"a":0,"k":[179.955998,9]}}]},{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[156.03,58.5269],[150,60.5],[150,51.5],[151.137,50.9731],[153.801,48.862],[154.142,48.5716],[154.262,48.4698],[164.995,43.5],[175.226,48.4029],[175.515,48.6665],[179.99,51.5],[184.465,48.6665],[184.754,48.4029],[194.985,43.5],[205.718,48.4698],[205.838,48.5716],[206.179,48.8619],[208.843,50.9731],[209.98,51.5],[209.98,60.5],[203.95,58.5269],[200.373,55.74],[200.008,55.4284],[194.985,52.5],[190.51,55.3335],[190.221,55.5971],[179.99,60.5],[169.759,55.5971],[169.47,55.3335],[164.995,52.5],[159.972,55.4284],[159.607,55.74],[156.03,58.5269]],"i":[[0,0],[2.479,0],[0,0],[-0.807,0.523],[-1.105,0.941],[-0.117,0.0996],[-0.04,0.0344],[-4.892,0],[-1.989,-1.816],[-0.093,-0.0843],[-1.069,0],[-2.469,2.2384],[-0.1,0.0912],[-4.86,0],[-2.172,-1.8477],[-0.04,-0.0334],[-0.111,-0.094],[-0.772,-0.5002],[-0.02,0],[0,0],[1.508,0.977],[1.011,0.8643],[0.118,0.1],[1.189,0],[2.469,-2.2384],[0.1,-0.0912],[4.86,0],[1.989,1.816],[0.093,0.0843],[1.068,0],[2.55,-2.1678],[0.125,-0.1075],[1.304,-0.8448]],"o":[[-1.508,0.977],[0,0],[0.02,0],[0.772,-0.5002],[0.111,-0.0941],[0.04,-0.0334],[2.171,-1.8477],[4.86,0],[0.1,0.0912],[2.469,2.2384],[1.068,0],[0.093,-0.0843],[1.989,-1.816],[4.892,0],[0.04,0.0344],[0.117,0.0996],[1.105,0.9411],[0.807,0.523],[0,0],[-2.479,0],[-1.304,-0.8448],[-0.126,-0.1074],[-2.55,-2.1678],[-1.069,0],[-0.093,0.0843],[-1.99,1.816],[-4.86,0],[-0.1,-0.0912],[-2.469,-2.2384],[-1.189,0],[-0.118,0.1],[-1.012,0.8643],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":1,"k":[{"t":0,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":390,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":409.99999999999994,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":780,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":800,"s":[0.298039,0.466667,0.254902],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]},"r":2},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[179.989998,52]},"p":{"a":0,"k":[179.989998,52]}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]},{"ty":4,"st":0,"ip":0,"op":800,"ks":{"a":{"a":0,"k":[104.989753,32.23995]},"p":{"a":0,"k":[104.989754,32.239951]}},"shapes":[{"ty":"gr","it":[{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[75.0025,34.1599],[104.99,57.6799],[134.977,34.1599],[104.99,61.9999],[75.0025,34.1599]],"i":[[0,0],[0,-12.9595],[-24.579,0.0007],[24.279,0],[0.1336,12.8561]],"o":[[24.5798,0.0007],[0,-12.9595],[-0.133,12.8561],[-24.2792,0],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":1,"k":[{"t":0,"s":[0.396078,0.596078,0.345098],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":390,"s":[0.396078,0.596078,0.345098],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":409.99999999999994,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":780,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":800,"s":[0.396078,0.596078,0.345098],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[104.989754,48.079901]},"p":{"a":0,"k":[104.989754,48.079901]}}]},{"ty":"gr","it":[{"ty":"sh","ks":{"a":0,"k":{"v":[[75.0025,2.48],[104.99,26],[134.977,2.48],[104.99,30.32],[75.0025,2.48]],"i":[[0,0],[0,-12.9596],[-24.579,0.00071],[24.279,0],[0.1336,12.8561]],"o":[[24.5798,0.00071],[0,-12.9596],[-0.133,12.8561],[-24.2792,0],[0,0]],"c":false}}},{"ty":"fl","o":{"a":0,"k":100},"c":{"a":1,"k":[{"t":0,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":390,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":409.99999999999994,"s":[0.396078,0.596078,0.345098],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":780,"s":[0.396078,0.596078,0.345098],"i":{"x":1,"y":1},"o":{"x":0,"y":0}},{"t":800,"s":[0.67451,0.713725,0.231373],"i":{"x":1,"y":1},"o":{"x":0,"y":0}}]}},{"ty":"tr","o":{"a":0,"k":100},"a":{"a":0,"k":[104.989754,16.4]},"p":{"a":0,"k":[104.989754,16.4]}}]},{"ty":"tr","o":{"a":0,"k":100}}]}]}]}

src/tsx/components/cards/AdvantageCard.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+interface AdvantageCardProps {
+    label: string;
+    description: string;
+    icon: string;
+}
+
+const AdvantageCard: React.FC<AdvantageCardProps> = ({ label, description, icon }) => {
+
+
+    return (
+        <div className="h-full shadow-md rounded-2xl p-6 bg-green-light-900/15 group-odd:bg-green-dark-900/15 md:group-odd:bg-green-light-900/15 md:group-[:nth-child(4)]:bg-green-dark-900/15 md:flex md:justify-center md:items-center lg:p-8 lg:min-h-64 lg:items-center lg:justify-center">
+            <div className="text-lg text-center max-w-96 mx-auto lg:text-xl">
+                <figure className="w-16 mx-auto mb-3">
+                    <img
+                        src={icon}
+                        className="object-contain w-10 md:w-10 lg:w-14" alt=""/>
+                </figure>
+                <h3 className="mb-1 font-lato font-semibold">{label}</h3>
+                <p>{description}</p>
+            </div>
+        </div>
+    );
+};
+
+export default AdvantageCard;

src/tsx/components/sections/Advantages.tsx

@@ -0,0 +1,46 @@
+import AdvantageCard from "../cards/AdvantageCard";
+
+function Advantages() {
+    const advantages = [
+        {
+            label: "Für neugierige Augen",
+            icon: "/assets/svg/general/eye.svg",
+            description: "Öffentlicher Zugang zu den Daten und zum Projekt"
+        },
+        {
+            label: "Wissen, wo es lang geht",
+            icon: "/assets/svg/general/map.svg",
+            description: "Individuelle Routenplanung zur gezielten Bewässerung."
+        },
+        {
+            label: "Weniger ist mehr",
+            icon: "/assets/svg/general/reduce.svg",
+            description: "Gezielte Bewässerung, weniger Wasserverbrauch."
+        },
+    ];
+
+    return (
+        <section className="px-4 max-w-208 mx-auto my-28 md:px-6 md:grid md:grid-cols-2 md:grid-rows-2 md:gap-6 lg:gap-10 lg:my-36 lg:max-w-screen-lg xl:my-44 xl:max-w-screen-xl">
+            <article className="mb-8 lg:mb-14">
+                <h2 className="font-lato font-bold text-2xl mb-6 lg:text-3xl">
+                    Alle weiteren Funktionen und Vorteile im Überblick.
+                </h2>
+                <p>
+                    Dolore elit mollit voluptate cillum occaecat elit esse cupidatat pariatur culpa cupidatat tempor esse proident elit.
+                    Exercitation eu labore excepteur amet nostrud ullamco nisi aute non eiusmod velit ut labore
+                </p>
+            </article>
+
+            {advantages.map((advantage, index) => (
+                <article key={index} className="group mb-4 last:mb-0 md:mb-0">
+                    <AdvantageCard
+                        label={advantage.label}
+                        icon={advantage.icon}
+                        description={advantage.description} />
+                </article>
+            ))}
+        </section>
+    );
+}
+
+export default Advantages;

src/tsx/layout/Header.tsx

@@ -1,5 +1,7 @@
 import * as React from 'react';
+import Lottie from "lottie-react";
 import MainNavigation from '../components/navigation/MainNavigation';
+import logoAnimation from '../../json/logoAnimation.json'
 
 function Header() {
     const [open, setOpen] = React.useState(false);
@@ -32,9 +34,9 @@ function Header() {
         <header className={`fixed w-screen inset-x-0 top-0 z-50 before:w-screen before:transition-all before:ease-in-out before:duration-300 before:h-screen before:absolute before:bg-grey-900 before:-z-10 lg:before:transition-none ${open ? 'before:visible before:opacity-60' : 'before:opacity-0 before:invisible'}`}>
             <div className="relative px-4 py-5 max-w-screen-lg mx-auto flex justify-between items-center md:px-6 xl:max-w-screen-xl">
                 <a href="/" aria-label="Zur Startseite navigieren" className={`flex items-center gap-x-4 xl:gap-x-5 ${open ? 'opacity-0' : ''}`}>
-                    <img
-                        src="/assets/svg/logo/logo-large-color.svg"
-                        className="w-24 xl:w-28" alt="Green Ecolution Logo"/>
+                    <figure className="w-24 xl:w-28">
+                        <Lottie animationData={logoAnimation} />
+                    </figure>
                     <p className="hidden text-green-dark-900 font-lato font-semibold text-xl md:block xl:text-3xl">
                         Green Ecolution
                     </p>

src/tsx/pages/ProjectPage.tsx

@@ -1,3 +1,4 @@
+import Advantages from "../components/sections/Advantages";
 import DashboardPreview from "../components/sections/DashboardPreview";
 import Hero from "../components/sections/Hero";
 import Contact from "../components/sections/Contact";
@@ -10,6 +11,7 @@ function ProjectPage() {
         <main>
             <Hero headline={heroHeadline} description={heroDescription} type="project" />
             <DashboardPreview />
+            <Advantages />
             <Contact />
         </main>
     );