360 lines
13 KiB
Vue
360 lines
13 KiB
Vue
<!-- pages/index.vue -->
|
||
<template>
|
||
<div id="page">
|
||
<header></header>
|
||
<main>
|
||
<div class="heroBox">
|
||
<div class="textBox">
|
||
<h1>Reflexionszeit</h1>
|
||
<h2>für innere Klarheit</h2>
|
||
<h3>Ich helfe Dir, Deinen persönlichen Flow wiederzufinden</h3>
|
||
<p>Im Beruf, im Leben, in Dir selbst.</p>
|
||
<p>Lass uns ein Stück Weg zusammen gehen!</p>
|
||
</div>
|
||
<div class="imageBox">
|
||
<img src="~/assets/images/Sabrina.webp" alt="Sabrina Hennrich" />
|
||
</div>
|
||
|
||
</div>
|
||
<div class="whatIdo sectionStyle">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="439 1148 424 402"
|
||
class="shape blue"
|
||
role="img"
|
||
aria-hidden="true"
|
||
>
|
||
<path
|
||
class="shape-fill"
|
||
d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
|
||
fill-opacity="1"
|
||
/>
|
||
</svg>
|
||
<h2>Was ich tue</h2>
|
||
<p><b>Ich biete Dir einen mentalen Raum, in dem Du wieder spürst, wer Du bist.</b> </p><p>
|
||
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.
|
||
Das ist keine Methode. Es ist meine Art, Menschen zu begegnen: tief, ehrlich und empathisch.
|
||
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.</p>
|
||
</div>
|
||
<div class="becomeArea">
|
||
<div class="sectionStyle" style="max-width:60%;">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="439 1148 424 402"
|
||
class="shape salbei"
|
||
role="img"
|
||
aria-hidden="true"
|
||
>
|
||
<path
|
||
class="shape-fill"
|
||
d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
|
||
fill-opacity="1"
|
||
/>
|
||
</svg>
|
||
<h2>Was Du von mir bekommst</h2>
|
||
<p>
|
||
<ul>
|
||
<li><b>Klarheitssessions:</b> Intensive 90-Minuten-Gespräche, online oder persönlich.</li>
|
||
<li><b>Begleitung:</b> 4 Wochen stille Begleitung mit Impulsen und Austausch.</li>
|
||
<li><b>Spaziergänge & Gespräche:</b> In der Natur Klarheit finden, den Kopf frei bekommen.</li>
|
||
</ul>
|
||
</p>
|
||
</div>
|
||
<div class="sectionStyle" style="margin-left: 15vw; margin-top: 3rem;max-width:55%;">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="439 1148 424 402"
|
||
class="shape gold"
|
||
role="img"
|
||
aria-hidden="true"
|
||
>
|
||
<path
|
||
class="shape-fill"
|
||
d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
|
||
fill-opacity="1"
|
||
/>
|
||
</svg>
|
||
<h2>Was Du nicht bekommst</h2>
|
||
<p>
|
||
<ul>
|
||
<li><b>Keine Pseudo-Coaching-Methoden:</b></li>
|
||
<li><b>Kein Leistungsdruck oder Optimierungszwang:</b></li>
|
||
<li><b>Keine schnellen „Rezepte“:</b></li>
|
||
<li><b>Nur Raum für Dich – in Deinem Tempo:</b></li>
|
||
</ul>
|
||
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="costBox">
|
||
<div class="sectionStyle">
|
||
<svg
|
||
xmlns="http://www.w3.org/2000/svg"
|
||
viewBox="439 1148 424 402"
|
||
class="shape lavender"
|
||
role="img"
|
||
aria-hidden="true"
|
||
>
|
||
<path
|
||
class="shape-fill"
|
||
d="M559.726,1176.876C639.808,1140.990,728.567,1142.371,760.600,1160.313C864.266,1218.379,891.401,1397.707,832.007,1492.251C798.522,1545.552,778.603,1533.313,745.251,1541.248C693.222,1553.626,620.927,1559.502,509.007,1512.264C431.068,1479.368,466.964,1427.382,444.941,1316.276C424.378,1212.537,455.905,1223.398,559.726,1176.876Z"
|
||
fill-opacity="1"
|
||
/>
|
||
</svg>
|
||
<h2>Dein Energieausgleich, um zu Dir selbst zu finden</h2>
|
||
<p>Ich arbeite auf Spendenbasis. Du gibst, was es Dir wert ist. </p>
|
||
<p class="hint"> (Als Orientierung für Dich: Mein regulärer Stundensatz liegt bei 95 €/h)</p>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<footer>
|
||
<div>
|
||
<h3>Kontakt</h3>
|
||
<p>Sabrina Hennrich</p>
|
||
<p>Rausch 10</p>
|
||
<p>82211 Herrsching am Ammersee</p>
|
||
<p>Telefon: 0177 / 83 88 553</p>
|
||
</div>
|
||
<div></div>
|
||
<div></div>
|
||
</footer>
|
||
</div>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
useHead({
|
||
title: 'Sabrina Flow – Zurück in Deinen natürlichen Zustand',
|
||
meta: [
|
||
{
|
||
name: 'description',
|
||
content: 'Ich helfe dir, Deinen inneren Flow wiederzufinden – mit Klarheit, Tiefe und echtem Raum für Dich.'
|
||
}
|
||
]
|
||
})
|
||
</script>
|
||
|
||
<style lang="sass">
|
||
@import '~/assets/styles/main.sass'
|
||
|
||
body
|
||
margin: 0
|
||
padding: 0
|
||
width: 100%
|
||
overflow-x: hidden
|
||
|
||
#page
|
||
margin: 0
|
||
max-width: 100%
|
||
header
|
||
background-image: url('~/assets/images/pathcorner.webp')
|
||
background-size: 80% auto
|
||
background-repeat: no-repeat
|
||
background-position: right top
|
||
width: 100%
|
||
min-height: 40vw
|
||
z-index: 1
|
||
&::before
|
||
content: ''
|
||
position: absolute
|
||
top: 0
|
||
left: -25%
|
||
width: 50%
|
||
aspect-ratio: 1 / 1
|
||
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: 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
|
||
max-width: 100%
|
||
|
||
.heroBox
|
||
display: grid
|
||
grid-template-columns: 1fr 1fr
|
||
gap: 2rem
|
||
width: 80%
|
||
margin: 0 10%
|
||
align-items: start
|
||
|
||
.textBox
|
||
background-color: rgba(255, 255, 255, 0.8)
|
||
padding: 2rem 6vw
|
||
border-radius: 1rem
|
||
margin-top: 20%
|
||
z-index: 2
|
||
|
||
h1
|
||
color: $darkblue
|
||
|
||
h2
|
||
margin: .5rem auto 2rem auto
|
||
|
||
h3
|
||
font-family: $boldFont
|
||
font-size: clamp(1.3rem, .9rem + 2vw, 1.5rem)
|
||
color: $terra
|
||
|
||
p
|
||
font-size: clamp(1.2rem, .7rem + 1vw, 1.3rem)
|
||
color: $terra
|
||
margin: .5rem 0
|
||
|
||
.imageBox
|
||
display: flex
|
||
justify-content: right
|
||
align-items: center
|
||
z-index: 2
|
||
|
||
img
|
||
width: 100%
|
||
max-width: 400px
|
||
@media (max-width: $breakPointPad)
|
||
margin-bottom: -4rem
|
||
|
||
// Mobile-Ansicht: eine Spalte
|
||
@media (max-width: $breakPointPad)
|
||
grid-template-columns: 1fr
|
||
.textBox,
|
||
.imageBox
|
||
max-width: 100%
|
||
|
||
.sectionStyle
|
||
position: relative
|
||
width: 65%
|
||
margin: 8rem 10% 1rem 10%
|
||
z-index: 2
|
||
background-color: rgba(255, 255, 255, 0.8)
|
||
border-radius: 15%
|
||
padding: 1rem 2rem
|
||
@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%
|
||
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
|
||
|
||
|
||
|
||
|
||
</style>
|
||
|