init

.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage /> 
+    </NuxtLayout>
+  </div>
+</template>

assets/images/shape.svg

@@ -0,0 +1 @@
+<svg width="424" xmlns="http://www.w3.org/2000/svg" height="402" id="screenshot-b782dee3-7e9f-8060-8006-75dfe4789840" viewBox="439 1148 424 402" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-b782dee3-7e9f-8060-8006-75dfe4789840"><g class="fills" id="fills-b782dee3-7e9f-8060-8006-75dfe4789840"><path 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" style="fill: rgb(237, 220, 179); fill-opacity: 0.4;"/></g></g></svg>

assets/styles/main.sass

@@ -0,0 +1,64 @@
+$color-primary: #D36B4C
+$color-secondary: #D2B48C
+$salbeiLight: #A7C1A8
+$salbei: #819A91
+$blue: #5C7285
+$darkblue: #636F95
+$honey: #E4B95B
+$beige: #E2E0C8
+$pink: #AE445A
+$color-bg: #f9f9f9
+$terra: #817363
+
+@font-face
+  font-family: 'OoohBaby'
+  src: url('/fonts/OoohBaby-Regular.woff2') format('woff2')
+  font-weight: normal
+  font-style: normal
+  font-display: swap
+
+@font-face
+  font-family: 'Paprika'
+  src: url('/fonts/Paprika-Regular.woff2') format('woff2')
+  font-weight: normal
+  font-style: normal
+  font-display: swap
+
+@font-face
+  font-family: 'Mainfont'
+  src: url('/fonts/Urbanist-ExtraLight.woff2') format('woff2')
+  font-weight: normal
+  font-style: normal
+  font-display: swap
+
+@font-face
+  font-family: 'Mainfont-Bold'
+  src: url('/fonts/Urbanist-Medium.woff2') format('woff2')
+  font-weight: normal
+  font-style: normal
+  font-display: swap
+
+$font-Header: 'Paprika', sans-serif  
+$mainFont: 'Mainfont', Helvetica, Arial, sans-serif
+$boldFont: 'Mainfont-Bold', Arial, sans-serif
+
+body
+  font-family: $mainFont
+
+h1, h2, .flowFont
+    font-family: $font-Header
+h1
+    color: $pink
+    font-size: clamp(2.2rem, 1.8rem + 2vw, 4rem)
+    margin: 1rem 0 0 0
+
+h2
+    color: darken($honey, 20%)
+    font-size: clamp(1.6rem, .9rem + 2vw, 2.2rem)
+
+p, li
+    font-size: clamp(1.2rem, .8rem + 2vw, 1.4rem)
+    color: darkgrey
+
+b
+    font-family: $boldFont

eslint.config.mjs

@@ -0,0 +1,6 @@
+// @ts-check
+import withNuxt from './.nuxt/eslint.config.mjs'
+
+export default withNuxt(
+  // Your custom configs here
+)

nuxt.config.ts

@@ -0,0 +1,6 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2025-05-15',
+  devtools: { enabled: true },
+  modules: ['@nuxt/eslint', '@nuxt/image']
+})

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "nuxt-app",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@nuxt/eslint": "^1.5.2",
+    "@nuxt/image": "^1.10.0",
+    "eslint": "^9.30.1",
+    "nuxt": "^3.17.6",
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "sass": "^1.89.2"
+  }
+}

pages/index.vue

@@ -0,0 +1,164 @@
+<!-- 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>
+  

public/robots.txt

@@ -0,0 +1,2 @@
+User-Agent: *
+Disallow:

server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}