diff --git a/assets/images/footerWave.webp b/assets/images/footerWave.webp new file mode 100644 index 0000000..120d5f1 Binary files /dev/null and b/assets/images/footerWave.webp differ diff --git a/assets/images/waveFlow.webp b/assets/images/waveFlow.webp new file mode 100644 index 0000000..759bbc8 Binary files /dev/null and b/assets/images/waveFlow.webp differ diff --git a/assets/styles/main.sass b/assets/styles/main.sass index 10f19ec..c94318f 100644 --- a/assets/styles/main.sass +++ b/assets/styles/main.sass @@ -9,6 +9,15 @@ $beige: #E2E0C8 $pink: #AE445A $color-bg: #f9f9f9 $terra: #817363 +$lightBlue: #E2ECF4 +$salbeiLight: #EBF7F3 +$lightGold: #F8F1E1 +$lightLavender: #EEE0F7 + +$breakPointPhone: 480px // Smartphones +$breakPointPad: 768px // Tablets +$breakPointDesk: 1024px // Laptops & kleine Desktops +$breakPointWide: 1440px // Große Desktops @font-face font-family: 'OoohBaby' diff --git a/pages/index.vue b/pages/index.vue index 63bdc3b..1eef0d9 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -17,6 +17,19 @@
+

Was ich tue

Ich biete Dir einen mentalen Raum, in dem Du wieder spürst, wer Du bist.

Denn ich nehme Menschen sehr genau wahr. Nicht nur das was sie sagen, sondern vor allem auch das, was sie nicht sagen. Ich spüre Stimmungen, innere Spannungen und emotionale Blockaden, oft bevor sie selbst sie greifen können. @@ -24,8 +37,88 @@ Das ist keine Methode. Es ist meine Art, Menschen zu begegnen: tief, ehrlich und Ich sehe Zusammenhänge, wo andere sich wundern. Ich höre, was hinter den Worten mitschwingt und kann es für sie in Worte fassen. Klar. Ruhig. Ohne Urteil. Das ist der Raum, den ich halte: ein Raum, in dem du dich wieder spüren kannst. Ein Raum, in dem du beginnst zu verstehen, was dich innerlich blockiert. Nicht durch Analyse, sondern durch Verbindung. Nicht durch Druck, sondern durch echte Resonanz.

+
+
+ +

Was Du von mir bekommst

+

+

+

+
+
+ +

Was Du nicht bekommst

+

+

+ +

+
+
+
+
+ +

Dein Energieausgleich, um zu Dir selbst zu finden

+

Ich arbeite auf Spendenbasis. Du gibst, was es Dir wert ist.

+

(Als Orientierung für Dich: Mein regulärer Stundensatz liegt bei 95 €/h)

+
+
- + @@ -72,17 +165,26 @@ body background-image: url('~/assets/images/Mandala.webp') background-size: cover background-repeat: no-repeat + @media (max-width: $breakPointPad) + top: 2rem + width: 80% + left: -40% &::after content: '' position: absolute top: 35% right: -15% - width: 40% + width: 60% + max-width: 600px aspect-ratio: 1 / 1 background-image: url('~/assets/images/spirale.webp') background-size: cover background-repeat: no-repeat z-index: 0 + @media (max-width: $breakPointPad) + top: 20% + width: 80% + right: -50% main z-index: 2 margin-top: -35vw @@ -128,37 +230,131 @@ body img width: 100% max-width: 400px + @media (max-width: $breakPointPad) + margin-bottom: -4rem // Mobile-Ansicht: eine Spalte - @media (max-width: 768px) + @media (max-width: $breakPointPad) grid-template-columns: 1fr .textBox, .imageBox max-width: 100% .sectionStyle - width: 80% - margin: 4rem 10% + position: relative + width: 65% + margin: 8rem 10% 1rem 10% z-index: 2 background-color: rgba(255, 255, 255, 0.8) - border-radius: 1rem + border-radius: 15% padding: 1rem 2rem - h2, p + @media (max-width: $breakPointPad) + width: 80% + margin: 8rem 5vw 1rem 5vw + .shape + position: absolute + top: -.5rem + left: -.5rem + width: 12rem + aspect-ratio: 1 / 1 + z-index: 1 + + &.blue + .shape-fill + fill: $lightBlue + + &.salbei + .shape-fill + fill: $salbeiLight + + &.gold + .shape-fill + fill: $lightGold + + &.lavender + .shape-fill + fill: $lightLavender + + + h2, p, li z-index: 2 position: relative color: $terra h2 font-size: 180% - &::before - content: '' - position: absolute - top: -2rem - left: -3rem - width: 20vw - aspect-ratio: 1 / 1 - background-image: url('~/assets/images/shape.svg') - background-size: cover - z-index: 1 + z-index: 2 + p + padding: 0 0 0 4vw + font-size: 1.2rem + &.hint + font-size: 1rem + margin-top: -1rem + margin-left: 3rem + li + font-size: 1.1rem + margin: 0.5rem 0 + + .becomeArea + position: relative + background-image: url('~/assets/images/waveFlow.webp') + background-size: auto 100% + background-repeat: no-repeat + background-position: left bottom + width: 100% + padding: 1rem 0 25vw 15vw + margin: -15vh 0 0 0 + @media (max-width: $breakPointPad) + background-size: 100% auto + + .costBox + margin: -10vh 0 -10vw 0 + + footer + display: grid + align-items: end + grid-template-columns: repeat(3, 1fr) + gap: 2rem + padding: 2rem 10% + background-image: url('~/assets/images/footerWave.webp') + background-size: 100% auto + background-repeat: no-repeat + background-position: right top + width: 100% + min-height: 20rem + z-index: 1 + margin: 10rem 0 0 0 + position: relative + + div + display: flex + flex-direction: column + justify-content: flex-end // Inhalt im div nach unten + padding: 1rem 1rem 0 1rem + margin: 0 + + h3, p + padding: 0 0 .2rem 0 + margin: 0 + line-height: 1.4 + + h3 + color: $terra + font-size: 1rem + text-transform: uppercase + font-family: $font-Header + margin-bottom: .5rem + p + font-size: 1.1rem + color: black + + @media (max-width: $breakPointPad) + grid-template-columns: 1fr + background-position: left bottom + background-size: 150% auto + + + + \ No newline at end of file