From c3dd734733341faa1c7e43f982bc0f9217c5c292 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Wed, 12 Jun 2024 10:16:29 +0200 Subject: [PATCH 01/11] feat: add background for mobile --- public/assets/svg/background/hero-desktop.svg | 4 +++ public/assets/svg/background/hero-mobile.svg | 4 +++ src/css/components/background.css | 9 +++++ src/css/frontend.css | 1 + src/tsx/App.tsx | 2 ++ src/tsx/components/sections/HomepageHero.tsx | 34 +++++++++++++++++++ tailwind.config.js | 2 ++ 7 files changed, 56 insertions(+) create mode 100644 public/assets/svg/background/hero-desktop.svg create mode 100644 public/assets/svg/background/hero-mobile.svg create mode 100644 src/css/components/background.css create mode 100644 src/tsx/components/sections/HomepageHero.tsx diff --git a/public/assets/svg/background/hero-desktop.svg b/public/assets/svg/background/hero-desktop.svg new file mode 100644 index 0000000..4adc4a6 --- /dev/null +++ b/public/assets/svg/background/hero-desktop.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/svg/background/hero-mobile.svg b/public/assets/svg/background/hero-mobile.svg new file mode 100644 index 0000000..195a274 --- /dev/null +++ b/public/assets/svg/background/hero-mobile.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/css/components/background.css b/src/css/components/background.css new file mode 100644 index 0000000..164c3ab --- /dev/null +++ b/src/css/components/background.css @@ -0,0 +1,9 @@ +.background__ground { + @apply absolute inset-x-0 -bottom-[18%]; +} + +@media (min-width: 400px) { + .background__ground { + @apply -bottom-[20%]; + } +} diff --git a/src/css/frontend.css b/src/css/frontend.css index 0dd123f..fd25357 100644 --- a/src/css/frontend.css +++ b/src/css/frontend.css @@ -1,3 +1,4 @@ +@import './components/background.css'; @import './components/fonts.css'; @import './components/general.css'; @import './components/splide.css'; diff --git a/src/tsx/App.tsx b/src/tsx/App.tsx index 7181d8f..a91459a 100644 --- a/src/tsx/App.tsx +++ b/src/tsx/App.tsx @@ -1,4 +1,5 @@ import Faq from "./components/sections/Faq"; +import HompageHero from "./components/sections/HomepageHero"; import Introduction from "./components/sections/Introduction"; import Process from "./components/sections/Process"; import Stakeholder from "./components/sections/Stakeholder"; @@ -6,6 +7,7 @@ import Stakeholder from "./components/sections/Stakeholder"; function App() { return (
+ diff --git a/src/tsx/components/sections/HomepageHero.tsx b/src/tsx/components/sections/HomepageHero.tsx new file mode 100644 index 0000000..b50b62a --- /dev/null +++ b/src/tsx/components/sections/HomepageHero.tsx @@ -0,0 +1,34 @@ +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/tailwind.config.js b/tailwind.config.js index da24cf0..50e0108 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -46,6 +46,8 @@ export default { backgroundImage: { 'background-footer-mobile': "url('/assets/svg/background/footer-mobile.svg')", 'background-footer-desktop': "url('/assets/svg/background/footer-desktop.svg')", + 'background-hero-mobile': "url('/assets/svg/background/hero-mobile.svg')", + 'background-hero-desktop': "url('/assets/svg/background/hero-desktop.svg')", }, screens: { '3xl': '1920px', From c4e50edee73903bac6e1a239a417b14a587b182c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Fri, 14 Jun 2024 19:37:31 +0200 Subject: [PATCH 02/11] fix: add devider (wip) --- src/tsx/App.tsx | 2 ++ src/tsx/components/sections/HomepageHero.tsx | 31 +++++++++---------- .../components/sections/StartpageDevider.tsx | 11 +++++++ 3 files changed, 27 insertions(+), 17 deletions(-) create mode 100644 src/tsx/components/sections/StartpageDevider.tsx diff --git a/src/tsx/App.tsx b/src/tsx/App.tsx index a91459a..78cc2c4 100644 --- a/src/tsx/App.tsx +++ b/src/tsx/App.tsx @@ -3,11 +3,13 @@ import HompageHero from "./components/sections/HomepageHero"; import Introduction from "./components/sections/Introduction"; import Process from "./components/sections/Process"; import Stakeholder from "./components/sections/Stakeholder"; +import StartpageDevider from "./components/sections/StartpageDevider"; function App() { return (
+ diff --git a/src/tsx/components/sections/HomepageHero.tsx b/src/tsx/components/sections/HomepageHero.tsx index b50b62a..17792d3 100644 --- a/src/tsx/components/sections/HomepageHero.tsx +++ b/src/tsx/components/sections/HomepageHero.tsx @@ -2,17 +2,20 @@ 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. -

+
+
+
+

+ 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. +

+
-
+ + {/*
-
-
- - -
+
*/}
); } diff --git a/src/tsx/components/sections/StartpageDevider.tsx b/src/tsx/components/sections/StartpageDevider.tsx new file mode 100644 index 0000000..cfb6355 --- /dev/null +++ b/src/tsx/components/sections/StartpageDevider.tsx @@ -0,0 +1,11 @@ +function StartpageDevider() { + return ( +
+ +
+ ); +} + +export default StartpageDevider; From 4ab8a99279b9d96ec2a9493b4bfb9a94b32e4ba6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Sat, 15 Jun 2024 08:43:47 +0200 Subject: [PATCH 03/11] feat: add homepage devider to homepage --- src/tsx/components/sections/HomepageDevider.tsx | 14 ++++++++++++++ src/tsx/components/sections/HomepageHero.tsx | 2 +- src/tsx/components/sections/Introduction.tsx | 2 +- src/tsx/components/sections/StartpageDevider.tsx | 11 ----------- src/tsx/pages/HomePage.tsx | 2 +- 5 files changed, 17 insertions(+), 14 deletions(-) create mode 100644 src/tsx/components/sections/HomepageDevider.tsx delete mode 100644 src/tsx/components/sections/StartpageDevider.tsx diff --git a/src/tsx/components/sections/HomepageDevider.tsx b/src/tsx/components/sections/HomepageDevider.tsx new file mode 100644 index 0000000..dcdb1d5 --- /dev/null +++ b/src/tsx/components/sections/HomepageDevider.tsx @@ -0,0 +1,14 @@ +function HomepageDevider() { + return ( +
+ + +
+ ); +} + +export default HomepageDevider; diff --git a/src/tsx/components/sections/HomepageHero.tsx b/src/tsx/components/sections/HomepageHero.tsx index 17792d3..ae2f11a 100644 --- a/src/tsx/components/sections/HomepageHero.tsx +++ b/src/tsx/components/sections/HomepageHero.tsx @@ -5,7 +5,7 @@ function HompageHero() {
-

+

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

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/components/sections/StartpageDevider.tsx b/src/tsx/components/sections/StartpageDevider.tsx deleted file mode 100644 index 797c6a0..0000000 --- a/src/tsx/components/sections/StartpageDevider.tsx +++ /dev/null @@ -1,11 +0,0 @@ -function HomepageDevider() { - return ( -
- -
- ); -} - -export default HomepageDevider; diff --git a/src/tsx/pages/HomePage.tsx b/src/tsx/pages/HomePage.tsx index 17571b8..5aa2145 100644 --- a/src/tsx/pages/HomePage.tsx +++ b/src/tsx/pages/HomePage.tsx @@ -1,6 +1,6 @@ import Contact from "../components/sections/Contact"; import HompageHero from "../components/sections/HomepageHero"; -import HomepageDevider from "../components/sections/StartpageDevider"; +import HomepageDevider from "../components/sections/HomepageDevider"; import Faq from "./../components/sections/Faq"; import Introduction from "./../components/sections/Introduction"; import Process from "./../components/sections/Process"; From fa17d37a891064f459acf289c1eddd04a507d0fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Sat, 15 Jun 2024 10:15:34 +0200 Subject: [PATCH 04/11] feat: add second big tree to hero --- .../components/sections/HomepageDevider.tsx | 7 ++--- src/tsx/components/sections/HomepageHero.tsx | 26 +++++++++++-------- tailwind.config.js | 1 + 3 files changed, 18 insertions(+), 16 deletions(-) diff --git a/src/tsx/components/sections/HomepageDevider.tsx b/src/tsx/components/sections/HomepageDevider.tsx index dcdb1d5..649bb41 100644 --- a/src/tsx/components/sections/HomepageDevider.tsx +++ b/src/tsx/components/sections/HomepageDevider.tsx @@ -1,12 +1,9 @@ function HomepageDevider() { return ( -
-
-

+
+

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

@@ -15,15 +15,19 @@ function HompageHero() {

- {/*
-
+ +
); } diff --git a/tailwind.config.js b/tailwind.config.js index d3a0edb..78dbdb5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -52,6 +52,7 @@ export default { 'background-light-dot': "url('/assets/svg/background/general-light-dot.svg')", }, screens: { + 'xs': '400px', '3xl': '1920px', }, spacing: { From 1811f379606a7a9a49dd94a77b2970a986047338 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Sat, 15 Jun 2024 10:33:00 +0200 Subject: [PATCH 05/11] feat: add third tree --- src/tsx/components/sections/HomepageDevider.tsx | 2 +- src/tsx/components/sections/HomepageHero.tsx | 15 +++++++++++---- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/src/tsx/components/sections/HomepageDevider.tsx b/src/tsx/components/sections/HomepageDevider.tsx index 649bb41..295c516 100644 --- a/src/tsx/components/sections/HomepageDevider.tsx +++ b/src/tsx/components/sections/HomepageDevider.tsx @@ -1,6 +1,6 @@ function HomepageDevider() { return ( -
+
diff --git a/src/tsx/components/sections/HomepageHero.tsx b/src/tsx/components/sections/HomepageHero.tsx index 7510998..c97b228 100644 --- a/src/tsx/components/sections/HomepageHero.tsx +++ b/src/tsx/components/sections/HomepageHero.tsx @@ -15,15 +15,22 @@ function HompageHero() {
-
+ + + + + + + + +
+ ); +} + +export default HompageHero; diff --git a/src/tsx/components/sections/HomepageHero.tsx b/src/tsx/components/sections/HomepageHero.tsx deleted file mode 100644 index 35dd574..0000000 --- a/src/tsx/components/sections/HomepageHero.tsx +++ /dev/null @@ -1,46 +0,0 @@ -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/pages/HomePage.tsx b/src/tsx/pages/HomePage.tsx index 5aa2145..f7bfa8b 100644 --- a/src/tsx/pages/HomePage.tsx +++ b/src/tsx/pages/HomePage.tsx @@ -1,6 +1,6 @@ import Contact from "../components/sections/Contact"; -import HompageHero from "../components/sections/HomepageHero"; -import HomepageDevider from "../components/sections/HomepageDevider"; +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"; From 3bd806c200bb6a9b8bb608c2e3bf780e883cf198 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Sat, 15 Jun 2024 20:10:21 +0200 Subject: [PATCH 10/11] chore: cleanup not needed files --- src/css/components/background.css | 9 --------- src/css/frontend.css | 1 - src/tsx/components/homepage/HomepageDevider.tsx | 5 +++-- tailwind.config.js | 2 -- 4 files changed, 3 insertions(+), 14 deletions(-) delete mode 100644 src/css/components/background.css diff --git a/src/css/components/background.css b/src/css/components/background.css deleted file mode 100644 index 164c3ab..0000000 --- a/src/css/components/background.css +++ /dev/null @@ -1,9 +0,0 @@ -.background__ground { - @apply absolute inset-x-0 -bottom-[18%]; -} - -@media (min-width: 400px) { - .background__ground { - @apply -bottom-[20%]; - } -} diff --git a/src/css/frontend.css b/src/css/frontend.css index fd25357..0dd123f 100644 --- a/src/css/frontend.css +++ b/src/css/frontend.css @@ -1,4 +1,3 @@ -@import './components/background.css'; @import './components/fonts.css'; @import './components/general.css'; @import './components/splide.css'; diff --git a/src/tsx/components/homepage/HomepageDevider.tsx b/src/tsx/components/homepage/HomepageDevider.tsx index 3987f1d..dff42f5 100644 --- a/src/tsx/components/homepage/HomepageDevider.tsx +++ b/src/tsx/components/homepage/HomepageDevider.tsx @@ -1,18 +1,19 @@ function HomepageDevider() { return ( -
+
+
-
+ ); } diff --git a/tailwind.config.js b/tailwind.config.js index 70f2d72..3adcab2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -47,8 +47,6 @@ export default { backgroundImage: { 'background-footer-mobile': "url('/assets/svg/background/footer-mobile.svg')", 'background-footer-desktop': "url('/assets/svg/background/footer-desktop.svg')", - 'background-hero-mobile': "url('/assets/svg/background/hero-mobile.svg')", - 'background-hero-desktop': "url('/assets/svg/background/hero-desktop.svg')", 'background-light-dot': "url('/assets/svg/background/general-light-dot.svg')", 'background-yellow-dot': "url('/assets/svg/background/general-yellow-dot.svg')", }, From 604b2267a9fba333e80e0d9a3182f9cf8ab78b39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dorien=20Gr=C3=B6nwald?= Date: Tue, 18 Jun 2024 12:51:09 +0200 Subject: [PATCH 11/11] fix: update position of trees on landscape mobile phones --- src/tsx/components/homepage/HomepageHero.tsx | 6 +++--- tailwind.config.js | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/tsx/components/homepage/HomepageHero.tsx b/src/tsx/components/homepage/HomepageHero.tsx index 3b8f6ee..30772b3 100644 --- a/src/tsx/components/homepage/HomepageHero.tsx +++ b/src/tsx/components/homepage/HomepageHero.tsx @@ -24,21 +24,21 @@ function HompageHero() { -