diff --git a/index.html b/index.html
index 136d709..5ea3825 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>blog</title>
   </head>
diff --git a/src/assets/background/blackwhite.jpg b/src/assets/background/blackwhite.jpg
new file mode 100644
index 0000000..92d0877
Binary files /dev/null and b/src/assets/background/blackwhite.jpg differ
diff --git a/src/assets/background/marmor.jpg b/src/assets/background/marmor.jpg
new file mode 100644
index 0000000..03a4bea
Binary files /dev/null and b/src/assets/background/marmor.jpg differ
diff --git a/src/assets/background/paper.png b/src/assets/background/paper.png
new file mode 100644
index 0000000..00410e8
Binary files /dev/null and b/src/assets/background/paper.png differ
diff --git a/src/assets/background/wall.jpg b/src/assets/background/wall.jpg
new file mode 100644
index 0000000..8786d88
Binary files /dev/null and b/src/assets/background/wall.jpg differ
diff --git a/src/components/sections/HeroSection.vue b/src/components/sections/HeroSection.vue
index b4f99b8..4e08aa3 100644
--- a/src/components/sections/HeroSection.vue
+++ b/src/components/sections/HeroSection.vue
@@ -1,66 +1,101 @@
-<script setup>
-import { ref, onMounted, onUnmounted } from "vue"
+<script setup lang="ts">
+import { onMounted, ref } from "vue"
 import gsap from "gsap"
-import ScrollTrigger from "gsap/ScrollTrigger"
-import { ScrollSmoother } from 'gsap/ScrollSmoother';
 
 
-gsap.registerPlugin(ScrollTrigger)
 
-const section = ref<HTMLElement | null>(null)
-let ctx
+
+const box = ref<HTMLElement | null>(null)
+
+const heroText = ref<HTMLElement | null>(null)
+const c = ref<HTMLElement | null>(null)
+//section.value = document.querySelector(".hero")
 
 onMounted(() => {
-  ctx = gsap.context(() => {
-    gsap.from(".hero-title", {
-      y: 100,
-      opacity: 0,
-      duration: 1.2,
-      ease: "power3.out",
-      scrollTrigger: {
-        trigger: section.value,
-        start: "top 80%",
-        end: "top 50%",
-        scrub: true
-      }
-    })
+  if (box.value) {
+    gsap.fromTo(box.value, { yPercent: 100 , delay : 1 }, { x: () => window.innerWidth * 0.4 , y:  () => window.innerHeight * 0.1 ,rotate: 90,  duration: 4, repeat: 8, yoyo: true, delay : 1})
+  }
+  if (heroText.value) {
+  gsap.fromTo(
+    heroText.value,
+    { 
+      x: 0,        
+      y: 0,
 
-    gsap.from(".hero-sub", {
-      y: 40,
-      opacity: 0,
-      duration: 1,
-      delay: 0.3,
-      scrollTrigger: {
-        trigger: section.value,
-        start: "top 80%",
-        end: "top 50%",
-        scrub: true
-      }
-    })
-  }, section)
+    },
+    { 
+      // x: () => window.innerWidth / 2 - heroText.value!.offsetWidth / 2,  
+      y: () => window.innerHeight / 2 - heroText.value!.offsetHeight / 2 + 25,
+      duration: 4,
+      ease: "power2.inOut"
+    }
+  )
+}
+  if (c.value) {
+    gsap.fromTo(c.value, {delay: 1}, {
+        x: () => window.innerWidth * 0.1,
+        y: () => window.innerHeight * 0.1,
+      })
+  }
 })
-
-onUnmounted(() => ctx.revert())
 </script>
-
 <template>
+<div class="container">
+  <div ref="box" class="box green"></div>
   <section ref="section" class="hero">
-    <h1 class="hero-title">Welcome</h1>
-    <p class="hero-sub">Tom Herpel</p>
+    <div ref="heroText" class="hero-text">
+      <div class="titel" >Welcome</div>
+      <div>to my website</div>
+    </div>
+    <!-- <p class="hero-sub">Tom Herpel</p> -->
   </section>
+</div>
 </template>
 
 <style scoped>
+  .container {
+    background: radial-gradient(
+      129% 99% at 20% 85%,
+      rgb(54, 54, 54) 20%,
+      rgb(0, 0, 0) 90%
+    );
+  background-blend-mode: color-dodge;
+  }
+
+  
 .hero {
   min-height: 100vh;
-  background: #0f0f0f;
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
 }
-.hero-title {
-  font-size: clamp(3rem, 6vw, 6rem);
+.hero-text {
+  font-display: block;
+  font-style: normal;
+  font-weight: bold;
+  color: #ffffff;
+  
+  
+  font-size: clamp(2rem, 12rem, 5vw);
+  box-sizing: border-box;
+  width: 100%;
 }
+.titel { 
+  font-weight: 900;
+   font-size: clamp(3rem, 6vw, 6rem); 
+  
+}
+.box {
+  width: 100px;
+  height: 100px;
+  background: linear-gradient( 111.45deg,#ffffff 19.42%,#f7bdf8 73.08%);
+  border-radius: 20%;
+}
+
+
+
+
+
 </style>
\ No newline at end of file
diff --git a/src/components/sections/TextSection.vue b/src/components/sections/TextSection.vue
index 87de6df..687291e 100644
--- a/src/components/sections/TextSection.vue
+++ b/src/components/sections/TextSection.vue
@@ -1,40 +1,5 @@
 <script setup>
-import { ref, onMounted, onUnmounted } from "vue"
-import gsap from "gsap"
-import ScrollTrigger from "gsap/ScrollTrigger"
 
-gsap.registerPlugin(ScrollTrigger)
-
-const section = ref(null)
-let ctx
-
-onMounted(() => {
-  ctx = gsap.context(() => {
-
-    gsap.from(".fade-text", {
-      opacity: 0,
-      y: 50,
-      duration: 1,
-      scrollTrigger: {
-        trigger: section.value,
-        start: "top 70%"
-      }
-    })
-
-    gsap.to(".highlight", {
-      backgroundSize: "100% 100%",
-      scrollTrigger: {
-        trigger: ".highlight",
-        start: "top 80%",
-        end: "top 50%",
-        scrub: true
-      }
-    })
-
-  }, section)
-})
-
-onUnmounted(() => ctx.revert())
 </script>
 
 <template>
diff --git a/src/composables/useScrollAnimations.ts b/src/composables/useScrollAnimations.ts
index e998126..d61feab 100644
--- a/src/composables/useScrollAnimations.ts
+++ b/src/composables/useScrollAnimations.ts
@@ -23,11 +23,20 @@ export function useActiveSection(sectionIds: string[]) {
         end: 'bottom center',
         onEnter: () => {
       if (currentSection.value !== id) {
-        //uiStore.currentSection = id
-        console.log(`Section aktiv: ${id} (nach unten gescrollt)`)
+          currentSection.value = id
+
+        console.log(`Section aktiv: ${id} (nach unten gescrollt)`);
+        window.dispatchEvent(new CustomEvent('section:enter', {detail: id}))
       }
     },
-        onEnterBack: () => (currentSection.value = id),
+        onEnterBack: () => {
+          if (currentSection.value !== id) {
+            currentSection.value = id
+            window.dispatchEvent(new CustomEvent('section:enter', {detail : id}))
+
+          }
+        },
+        
       })
     })
   })
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 1695924..75c0785 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -5,6 +5,9 @@ import TextSection from '../components/sections/TextSection.vue'
 import { useActiveSection } from '../composables/useScrollAnimations'
 
 const { currentSection } = useActiveSection(['hero', 'image', 'text'])
+
+
+
 </script>
 
 <template>
@@ -15,4 +18,11 @@ const { currentSection } = useActiveSection(['hero', 'image', 'text'])
   <div class="indicator">
     Aktuelle Section: {{ currentSection }}
   </div>
-</template>
\ No newline at end of file
+</template>
+
+
+
+
+<style lang="css" scoped>
+
+</style>
\ No newline at end of file
