feat: add dashboard preview section

package.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "@splidejs/react-splide": "^0.7.12",
+    "lottie-react": "^2.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.23.1"

src/tsx/components/sections/DashboardPreview.tsx

@@ -0,0 +1,25 @@
+import Lottie from "lottie-react";
+import dashboardAnimation from "../../../json/dashboardAnimation.json"
+
+function DashboardPreview() {
+  return (
+    <section className="mb-28 px-4 max-w-208 mx-auto md:px-6 lg:mb-36 xl:max-w-screen-lg xl:mb-44">
+        <article className="mb-8 g:mb-14 md:text-center">
+            <h2 className="font-lato font-bold text-2xl mb-6 lg:text-3xl">
+                Fundierte Handlungsempfehlungen<br/>
+                zur Bewässerung auf einen Blick:
+            </h2>
+            <p>
+                Unser System liefert durch die wissenschaftliche Datenauswertung fundierte Handlungsempfehlungen, wann welche Vegetation an welchem Standort
+                werden muss. Excepteur do consectetur quis nulla ut et nisi aute id consectetur excepteur nostrud anim culpa reprehenderit.
+            </p>
+        </article>
+
+        <figure className="translate-x-4 xl:translate-x-16">
+            <Lottie animationData={dashboardAnimation} />
+        </figure>
+    </section>
+  );
+}
+
+export default DashboardPreview;

src/tsx/components/Hero.tsx → src/tsx/components/sections/Hero.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import ProcessCard from './cards/ProcessCard';
-import { steps } from '../../data/processSteps';
-import StepCircle from './process/StepCircle';
+import ProcessCard from './../cards/ProcessCard';
+import { steps } from '../../../data/processSteps';
+import StepCircle from './../process/StepCircle';
 
 interface HeroProps {
     headline: string;

src/tsx/pages/ProjectPage.tsx

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

yarn.lock

@@ -1525,6 +1525,18 @@ loose-envify@^1.1.0:
   dependencies:
     js-tokens "^3.0.0 || ^4.0.0"
 
+lottie-react@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/lottie-react/-/lottie-react-2.4.0.tgz#f7249eee2b1deee70457a2d142194fdf2456e4bd"
+  integrity sha512-pDJGj+AQlnlyHvOHFK7vLdsDcvbuqvwPZdMlJ360wrzGFurXeKPr8SiRCjLf3LrNYKANQtSsh5dz9UYQHuqx4w==
+  dependencies:
+    lottie-web "^5.10.2"
+
+lottie-web@^5.10.2:
+  version "5.12.2"
+  resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.12.2.tgz#579ca9fe6d3fd9e352571edd3c0be162492f68e5"
+  integrity sha512-uvhvYPC8kGPjXT3MyKMrL3JitEAmDMp30lVkuq/590Mw9ok6pWcFCwXJveo0t5uqYw1UREQHofD+jVpdjBv8wg==
+
 lru-cache@^10.2.0:
   version "10.2.2"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.2.2.tgz#48206bc114c1252940c41b25b41af5b545aca878"