From 68545e1c18d225e614b9f2d5a78a0d00e0b22591 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Fri, 7 Jun 2024 08:14:08 +0200 Subject: [PATCH 1/2] feat: add introduction section --- public/assets/svg/general/location.svg | 4 ++ public/assets/svg/general/sensor.svg | 4 ++ public/assets/svg/general/statistics.svg | 3 + public/assets/svg/general/tree.svg | 4 ++ src/css/components/splide.css | 8 +++ src/tsx/App.tsx | 2 + src/tsx/components/IntroductionCard.tsx | 23 +++++++ src/tsx/components/sections/Introduction.tsx | 71 ++++++++++++++++++++ src/tsx/components/sections/Stakeholder.tsx | 13 ++-- src/types/splidejs__react-splide.d.ts | 2 + 10 files changed, 129 insertions(+), 5 deletions(-) create mode 100644 public/assets/svg/general/location.svg create mode 100644 public/assets/svg/general/sensor.svg create mode 100644 public/assets/svg/general/statistics.svg create mode 100644 public/assets/svg/general/tree.svg create mode 100644 src/tsx/components/IntroductionCard.tsx create mode 100644 src/tsx/components/sections/Introduction.tsx diff --git a/public/assets/svg/general/location.svg b/public/assets/svg/general/location.svg new file mode 100644 index 0000000..7651b00 --- /dev/null +++ b/public/assets/svg/general/location.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/svg/general/sensor.svg b/public/assets/svg/general/sensor.svg new file mode 100644 index 0000000..ae62985 --- /dev/null +++ b/public/assets/svg/general/sensor.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/svg/general/statistics.svg b/public/assets/svg/general/statistics.svg new file mode 100644 index 0000000..5f31d4e --- /dev/null +++ b/public/assets/svg/general/statistics.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/svg/general/tree.svg b/public/assets/svg/general/tree.svg new file mode 100644 index 0000000..e07a76c --- /dev/null +++ b/public/assets/svg/general/tree.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/css/components/splide.css b/src/css/components/splide.css index 528d5f9..c400832 100644 --- a/src/css/components/splide.css +++ b/src/css/components/splide.css @@ -1,4 +1,12 @@ /* Override default styles from splide slider package */ +.splide.splide--grid > .splide__track { + @apply lg:pb-7 !important; +} + +.splide.splide--grid > .splide__track > .splide__list { + @apply xl:grid xl:grid-cols-2 xl:gap-x-6 xl:gap-y-8 !important; +} + .splide__pagination { @apply bottom-0 lg:-bottom-4 !important; } diff --git a/src/tsx/App.tsx b/src/tsx/App.tsx index 1bff48f..b7281af 100644 --- a/src/tsx/App.tsx +++ b/src/tsx/App.tsx @@ -1,9 +1,11 @@ import Faq from "./components/sections/Faq"; +import Introduction from "./components/sections/Introduction"; import Stakeholder from "./components/sections/Stakeholder"; function App() { return (
+
diff --git a/src/tsx/components/IntroductionCard.tsx b/src/tsx/components/IntroductionCard.tsx new file mode 100644 index 0000000..fb4bb53 --- /dev/null +++ b/src/tsx/components/IntroductionCard.tsx @@ -0,0 +1,23 @@ +import React from 'react'; + +interface IntroductionCardProps { + label: string; + icon: string; + description: string; +} + +const IntroductionCard: React.FC = ({ label, icon, description }) => { + return ( +
+
+ {label}/ +
+

{label}

+

{description}

+
+ ); +}; + +export default IntroductionCard; diff --git a/src/tsx/components/sections/Introduction.tsx b/src/tsx/components/sections/Introduction.tsx new file mode 100644 index 0000000..fc4806c --- /dev/null +++ b/src/tsx/components/sections/Introduction.tsx @@ -0,0 +1,71 @@ +import { Splide, SplideSlide } from '@splidejs/react-splide'; +import { i18nTranslated } from '../../helper/sliderTranslations'; +import '@splidejs/react-splide/css'; +import IntroductionCard from "../IntroductionCard"; + +function Introduction() { + const facts = [ + { + label: "Auswertung der Messdaten", + icon: "/assets/svg/general/statistics.svg", + description: "Durch die wissenschaftliche Datenauswertung wird eine fundierte Datengrundlage geliefert." + }, + { + label: "Monitoring mehrerer Standorte", + icon: "/assets/svg/general/location.svg", + description: "Bei der Interpretation der Daten werden die unterschiedlichen Standortbedingungen mit berücksichtigt." + }, + { + label: "Augenmerk auf Jungbäume und Beete", + icon: "/assets/svg/general/tree.svg", + description: "Beobachtet werden sollen besonders hitzeanfällige Vegetation wie Jungbäume und Blumenbeete." + }, + { + label: "Entwicklung einer Sensorlösung", + icon: "/assets/svg/general/sensor.svg", + description: "Die Daten zur Bodenfeuchte werden mithilfe von Sensoren nahe des Wurzelballens geliefert." + }, + ]; + + const breakpoints = { + 640: { + perPage: 2, + }, + 1280: { + destroy: true, + }, + } + + return ( +
+
+

+ Was beinhaltet smartes Grünflächenmanagement alles? +

+

+ Smartes Grünflächenmanagement umfasst die effiziente Überwachung und Bewässerung von + Vegetationsformen auf Grünflächen durch den Einsatz moderner Technologien wie Sensoren und Datenanalyse. + Dadurch wird eine präzise Steuerung der Pflegemaßnahmen ermöglicht, die angepasst sind an die spezifischen + Standortbedingungen und Art und Alter der Vegetation. +

+
+ + + {facts.map((fact, index) => ( + + + + ))} + +
+ ); +} + +export default Introduction; diff --git a/src/tsx/components/sections/Stakeholder.tsx b/src/tsx/components/sections/Stakeholder.tsx index c9e05fb..e8429d6 100644 --- a/src/tsx/components/sections/Stakeholder.tsx +++ b/src/tsx/components/sections/Stakeholder.tsx @@ -27,19 +27,22 @@ function Stakeholder() { return (
-
+

Wer sind die Beteiligten?

-
+

Id commodo eiusmod est culpa voluptate duis ipsum sint reprehenderit cupidatat elit qui enim. Culpa exercitation sunt nisi magna tempor est ut duis consectetur consectetur pariatur irure ea aliqua. Incididunt voluptate ad adipisicing excepteur laborum voluptate ut deserunt deserunt cillum mollit. Ea sit nulla occaecat proident cupidatat laborum. Ipsum esse elit cillum tempor in consequat duis ullamco. -

-
+

+ - + {stakeholder.map((company, index) => ( diff --git a/src/types/splidejs__react-splide.d.ts b/src/types/splidejs__react-splide.d.ts index 7d2370f..9c9c339 100644 --- a/src/types/splidejs__react-splide.d.ts +++ b/src/types/splidejs__react-splide.d.ts @@ -28,6 +28,8 @@ declare module '@splidejs/react-splide' { focus?: number | 'center'; cloneStatus?: boolean; clones?: number; + mediaQuery?: string; + destroy?: boolean; breakpoints?: { [key: string]: SplideOptions; }; From ddb41d7d52a756757feba010a98e278ab93245dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Fri, 7 Jun 2024 08:18:27 +0200 Subject: [PATCH 2/2] fix: update cursor --- src/tsx/components/IntroductionCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/tsx/components/IntroductionCard.tsx b/src/tsx/components/IntroductionCard.tsx index fb4bb53..c197244 100644 --- a/src/tsx/components/IntroductionCard.tsx +++ b/src/tsx/components/IntroductionCard.tsx @@ -8,7 +8,7 @@ interface IntroductionCardProps { const IntroductionCard: React.FC = ({ label, icon, description }) => { return ( -
+