sabrinaflow_frontend/pages/index.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">
                <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>
        </main>
        <footer></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
        &::after
            content: ''
            position: absolute
            top: 35%
            right: -15%
            width: 40%
            aspect-ratio: 1 / 1
            background-image: url('~/assets/images/spirale.webp')
            background-size: cover
            background-repeat: no-repeat
            z-index: 0
    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
        
            // Mobile-Ansicht: eine Spalte
            @media (max-width: 768px)
                grid-template-columns: 1fr
                .textBox,
                .imageBox
                    max-width: 100%

        .sectionStyle  
            width: 80%
            margin: 4rem 10%
            z-index: 2
            background-color: rgba(255, 255, 255, 0.8)
            border-radius: 1rem
            padding: 1rem 2rem
            h2, p
                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
            
</style>