From 8866f339c2e557e9aa41cdff3841850786609837 Mon Sep 17 00:00:00 2001
From: David Haz <davidhzdev@gmail.com>
Date: Thu, 10 Jul 2025 22:10:54 +0300
Subject: [PATCH] fixes

---
 src/assets/common/hero.webp                   | Bin 0 -> 12040 bytes
 src/components/landing/Footer/Footer.vue      |   3 ++
 src/content/Backgrounds/Aurora/Aurora.vue     |  36 +++++++++++--
 .../Backgrounds/LetterGlitch/LetterGlitch.vue |  41 ++++++++++----
 .../Backgrounds/Lightning/Lightning.vue       |  51 ++++++++++++++++--
 .../Backgrounds/Particles/Particles.vue       |  36 +++++++++++--
 src/content/Backgrounds/Silk/Silk.vue         |  45 +++++++++++++++-
 src/css/base.css                              |  38 +++++++++++++
 src/demo/Animations/AnimatedContentDemo.vue   |   2 +-
 src/demo/Backgrounds/AuroraDemo.vue           |   2 +-
 src/demo/Backgrounds/LetterGlitchDemo.vue     |   2 +-
 src/demo/Backgrounds/LightningDemo.vue        |   2 +-
 src/demo/Backgrounds/ParticlesDemo.vue        |   2 +-
 src/demo/Backgrounds/SilkDemo.vue             |   2 +-
 src/demo/Backgrounds/WavesDemo.vue            |   2 +-
 src/demo/Components/CardSwapDemo.vue          |   2 +-
 src/pages/LandingPage.vue                     |  10 +++-
 17 files changed, 242 insertions(+), 34 deletions(-)
 create mode 100644 src/assets/common/hero.webp

diff --git a/src/assets/common/hero.webp b/src/assets/common/hero.webp
new file mode 100644
index 0000000000000000000000000000000000000000..568d256c861ceb0feedfd3fc2009c5b0de35ecf4
GIT binary patch
literal 12040
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

literal 0
HcmV?d00001

diff --git a/src/components/landing/Footer/Footer.vue b/src/components/landing/Footer/Footer.vue
index 24faf30..02469d1 100644
--- a/src/components/landing/Footer/Footer.vue
+++ b/src/components/landing/Footer/Footer.vue
@@ -21,6 +21,9 @@
           <a href="https://www.jsrepo.com/" target="_blank" class="footer-link">
             CLI
           </a>
+          <a href="https://reactbits.dev/" target="_blank" class="footer-link">
+            React Bits
+          </a>
         </div>
       </div>
     </footer>
diff --git a/src/content/Backgrounds/Aurora/Aurora.vue b/src/content/Backgrounds/Aurora/Aurora.vue
index 8267623..14854d6 100644
--- a/src/content/Backgrounds/Aurora/Aurora.vue
+++ b/src/content/Backgrounds/Aurora/Aurora.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" :class="className" :style="style" class="w-full h-full"></div>
+  <div ref="containerRef" :class="className" :style="style" class="relative"></div>
 </template>
 
 <script setup lang="ts">
@@ -162,8 +162,13 @@ const initAurora = () => {
 
   const resize = () => {
     if (!container) return
-    const width = container.offsetWidth
-    const height = container.offsetHeight
+
+    const parentWidth = container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth
+    const parentHeight = container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight
+
+    const width = Math.max(parentWidth, 300)
+    const height = Math.max(parentHeight, 300)
+
     renderer!.setSize(width, height)
     if (program) {
       program.uniforms.uResolution.value = [width, height]
@@ -189,7 +194,7 @@ const initAurora = () => {
       uTime: { value: 0 },
       uAmplitude: { value: props.amplitude },
       uColorStops: { value: colorStopsArray },
-      uResolution: { value: [container.offsetWidth, container.offsetHeight] },
+      uResolution: { value: [Math.max(container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth, 300), Math.max(container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight, 300)] },
       uBlend: { value: props.blend },
       uIntensity: { value: props.intensity },
     },
@@ -201,6 +206,9 @@ const initAurora = () => {
   gl.canvas.style.width = '100%'
   gl.canvas.style.height = '100%'
   gl.canvas.style.display = 'block'
+  gl.canvas.style.position = 'absolute'
+  gl.canvas.style.top = '0'
+  gl.canvas.style.left = '0'
 
   const update = (t: number) => {
     animateId = requestAnimationFrame(update)
@@ -263,4 +271,22 @@ watch(
     initAurora()
   }
 )
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+div {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+:deep(canvas) {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue b/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
index 2005c1e..64e6895 100644
--- a/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
+++ b/src/content/Backgrounds/LetterGlitch/LetterGlitch.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="relative w-full h-full overflow-hidden">
-    <canvas ref="canvasRef" class="block w-full h-full" />
+  <div class="relative overflow-hidden">
+    <canvas ref="canvasRef" class="absolute top-0 left-0 w-full h-full" />
     <div v-if="outerVignette"
       class="absolute top-0 left-0 w-full h-full pointer-events-none bg-[radial-gradient(circle,_rgba(0,0,0,0)_60%,_rgba(0,0,0,1)_100%)]" />
     <div v-if="centerVignette"
@@ -112,19 +112,24 @@ const resizeCanvas = () => {
   if (!parent) return
 
   const dpr = window.devicePixelRatio || 1
-  const rect = parent.getBoundingClientRect()
+  
+  const parentWidth = parent.parentElement?.offsetWidth || parent.offsetWidth || window.innerWidth
+  const parentHeight = parent.parentElement?.offsetHeight || parent.offsetHeight || window.innerHeight
+  
+  const width = Math.max(parentWidth, 300)
+  const height = Math.max(parentHeight, 300)
 
-  canvas.width = rect.width * dpr
-  canvas.height = rect.height * dpr
+  canvas.width = width * dpr
+  canvas.height = height * dpr
 
-  canvas.style.width = `${rect.width}px`
-  canvas.style.height = `${rect.height}px`
+  canvas.style.width = `${width}px`
+  canvas.style.height = `${height}px`
 
   if (context.value) {
     context.value.setTransform(dpr, 0, 0, dpr, 0, 0)
   }
 
-  const { columns, rows } = calculateGrid(rect.width, rect.height)
+  const { columns, rows } = calculateGrid(width, height)
   initializeLetters(columns, rows)
   drawLetters()
 }
@@ -243,4 +248,22 @@ watch([() => props.glitchSpeed, () => props.smooth], () => {
   }
   animate()
 })
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+div {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+:deep(canvas) {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/content/Backgrounds/Lightning/Lightning.vue b/src/content/Backgrounds/Lightning/Lightning.vue
index efbecf4..5663561 100644
--- a/src/content/Backgrounds/Lightning/Lightning.vue
+++ b/src/content/Backgrounds/Lightning/Lightning.vue
@@ -1,5 +1,5 @@
 <template>
-  <canvas ref="canvasRef" class="w-full h-full block mix-blend-screen"></canvas>
+  <canvas ref="canvasRef" class="w-full h-full block mix-blend-screen relative"></canvas>
 </template>
 
 <script setup lang="ts">
@@ -134,10 +134,38 @@ const initWebGL = () => {
 
   const resizeCanvas = () => {
     const rect = canvas.getBoundingClientRect()
-    canvas.width = rect.width
-    canvas.height = rect.height
-    canvas.style.width = rect.width + 'px'
-    canvas.style.height = rect.height + 'px'
+    const dpr = window.devicePixelRatio || 1
+    
+    let width = rect.width
+    let height = rect.height
+    
+    let parent = canvas.parentElement
+    while (parent && (!width || !height)) {
+      if (parent.offsetWidth && parent.offsetHeight) {
+        width = parent.offsetWidth
+        height = parent.offsetHeight
+        break
+      }
+      parent = parent.parentElement
+    }
+    
+    if (!width || !height) {
+      width = window.innerWidth
+      height = window.innerHeight
+    }
+    
+    width = Math.max(width, 300)
+    height = Math.max(height, 300)
+    
+    canvas.width = width * dpr
+    canvas.height = height * dpr
+    
+    canvas.style.width = '100%'
+    canvas.style.height = '100%'
+    canvas.style.display = 'block'
+    canvas.style.position = 'absolute'
+    canvas.style.top = '0'
+    canvas.style.left = '0'
   }
 
   resizeCanvas()
@@ -234,3 +262,16 @@ watch(
   () => {}
 )
 </script>
+
+<style scoped>
+canvas {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  display: block !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  z-index: 1 !important;
+}
+</style>
diff --git a/src/content/Backgrounds/Particles/Particles.vue b/src/content/Backgrounds/Particles/Particles.vue
index 991a1a9..4483af7 100644
--- a/src/content/Backgrounds/Particles/Particles.vue
+++ b/src/content/Backgrounds/Particles/Particles.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="containerRef" :class="className" class="relative w-full h-full"></div>
+  <div ref="containerRef" :class="className" class="relative"></div>
 </template>
 
 <script setup lang="ts">
@@ -142,19 +142,31 @@ const initParticles = () => {
   gl.canvas.style.width = '100%'
   gl.canvas.style.height = '100%'
   gl.canvas.style.display = 'block'
+  gl.canvas.style.position = 'absolute'
+  gl.canvas.style.top = '0'
+  gl.canvas.style.left = '0'
 
   camera = new Camera(gl, { fov: 15 })
   camera.position.set(0, 0, props.cameraDistance)
 
   const resize = () => {
-    const width = container.clientWidth
-    const height = container.clientHeight
+    if (!container) return
+    
+    const parentWidth = container.parentElement?.offsetWidth || container.offsetWidth || window.innerWidth
+    const parentHeight = container.parentElement?.offsetHeight || container.offsetHeight || window.innerHeight
+    
+    const width = Math.max(parentWidth, 300)
+    const height = Math.max(parentHeight, 300)
+    
     renderer!.setSize(width, height)
     camera!.perspective({ aspect: width / height })
 
     gl.canvas.style.width = '100%'
     gl.canvas.style.height = '100%'
     gl.canvas.style.display = 'block'
+    gl.canvas.style.position = 'absolute'
+    gl.canvas.style.top = '0'
+    gl.canvas.style.left = '0'
   }
   window.addEventListener('resize', resize, false)
   resize()
@@ -312,3 +324,21 @@ watch(
   () => {}
 )
 </script>
+
+<style scoped>
+div {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+:deep(canvas) {
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+</style>
diff --git a/src/content/Backgrounds/Silk/Silk.vue b/src/content/Backgrounds/Silk/Silk.vue
index 93a9d26..f52585b 100644
--- a/src/content/Backgrounds/Silk/Silk.vue
+++ b/src/content/Backgrounds/Silk/Silk.vue
@@ -125,8 +125,28 @@ const initSilk = () => {
 
   const resize = () => {
     if (!container || !camera) return
-    const width = container.offsetWidth
-    const height = container.offsetHeight
+    
+    let width = container.offsetWidth
+    let height = container.offsetHeight
+    
+    let parent = container.parentElement
+    while (parent && (!width || !height)) {
+      if (parent.offsetWidth && parent.offsetHeight) {
+        width = parent.offsetWidth
+        height = parent.offsetHeight
+        break
+      }
+      parent = parent.parentElement
+    }
+    
+    if (!width || !height) {
+      width = window.innerWidth
+      height = window.innerHeight
+    }
+    
+    width = Math.max(width, 300)
+    height = Math.max(height, 300)
+        
     renderer!.setSize(width, height)
     camera.perspective({ aspect: width / height })
 
@@ -168,6 +188,10 @@ const initSilk = () => {
   gl.canvas.style.width = '100%'
   gl.canvas.style.height = '100%'
   gl.canvas.style.display = 'block'
+  gl.canvas.style.position = 'absolute'
+  gl.canvas.style.top = '0'
+  gl.canvas.style.left = '0'
+  gl.canvas.style.zIndex = '1'
 
   let lastTime = 0
   const update = (t: number) => {
@@ -230,3 +254,20 @@ watch(
   () => {}
 )
 </script>
+
+<style scoped>
+div {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  display: block !important;
+}
+
+:deep(canvas) {
+  width: 100% !important;
+  height: 100% !important;
+  min-height: 100% !important;
+  display: block !important;
+  object-fit: cover !important;
+}
+</style>
diff --git a/src/css/base.css b/src/css/base.css
index 17a1520..c7a57a9 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -27,4 +27,42 @@ body {
 .back-to-top {
   background: #0b0b0b !important;
   border: 1px solid #142216;
+}
+
+/* Mobile toast container fixes */
+@media (max-width: 640px) {
+  .p-toast {
+    position: fixed !important;
+    bottom: 1rem !important;
+    right: 1rem !important;
+    left: 1rem !important;
+    width: auto !important;
+    max-width: calc(100vw - 2rem) !important;
+  }
+  
+  .p-toast-message {
+    max-width: 100% !important;
+    min-width: unset !important;
+    width: 100% !important;
+    margin: 0 !important;
+    font-size: 0.875rem !important;
+    padding: 0.75rem !important;
+    box-sizing: border-box !important;
+  }
+  
+  .p-toast-message-content {
+    padding: 0.5rem !important;
+    gap: 0.5rem !important;
+  }
+  
+  .p-toast-message-text {
+    word-wrap: break-word !important;
+    overflow-wrap: break-word !important;
+    hyphens: auto !important;
+  }
+  
+  .p-toast-message-summary {
+    font-size: 0.875rem !important;
+    line-height: 1.25 !important;
+  }
 }
\ No newline at end of file
diff --git a/src/demo/Animations/AnimatedContentDemo.vue b/src/demo/Animations/AnimatedContentDemo.vue
index 2928401..799c811 100644
--- a/src/demo/Animations/AnimatedContentDemo.vue
+++ b/src/demo/Animations/AnimatedContentDemo.vue
@@ -5,7 +5,7 @@
         <div class="demo-container relative py-6 overflow-hidden">
           <RefreshButton @click="forceRerender" />
 
-          <div :key="key" class="flex justify-center items-center h-96">
+          <div :key="key" class="flex justify-center items-center">
             <AnimatedContent :direction="direction" :delay="delay" :distance="distance" :reverse="reverse"
               :duration="duration" :ease="ease" :initial-opacity="initialOpacity" :animate-opacity="animateOpacity"
               :scale="scale" :threshold="threshold" @complete="() => console.log('✅ Animation Complete!')">
diff --git a/src/demo/Backgrounds/AuroraDemo.vue b/src/demo/Backgrounds/AuroraDemo.vue
index 5e5c722..83a6abb 100644
--- a/src/demo/Backgrounds/AuroraDemo.vue
+++ b/src/demo/Backgrounds/AuroraDemo.vue
@@ -4,7 +4,7 @@
       <template #preview>
         <div class="demo-container">
           <Aurora :color-stops="colorStops" :amplitude="amplitude" :blend="blend" :speed="speed"
-            :intensity="intensity" class="w-full h-96" />
+            :intensity="intensity" class="w-full" />
         </div>
 
         <Customize>
diff --git a/src/demo/Backgrounds/LetterGlitchDemo.vue b/src/demo/Backgrounds/LetterGlitchDemo.vue
index e8edcd0..bb75061 100644
--- a/src/demo/Backgrounds/LetterGlitchDemo.vue
+++ b/src/demo/Backgrounds/LetterGlitchDemo.vue
@@ -10,7 +10,7 @@
             :center-vignette="showCenterVignette"
             :outer-vignette="showOuterVignette"
             :smooth="smooth"
-            class="w-full h-96"
+            class="w-full h-full"
           />
         </div>
 
diff --git a/src/demo/Backgrounds/LightningDemo.vue b/src/demo/Backgrounds/LightningDemo.vue
index e69c0dc..084a571 100644
--- a/src/demo/Backgrounds/LightningDemo.vue
+++ b/src/demo/Backgrounds/LightningDemo.vue
@@ -4,7 +4,7 @@
       <template #preview>
         <div class="demo-container">
           <Lightning :hue="hue" :x-offset="xOffset" :speed="speed" :intensity="intensity"
-            :size="size" class="w-full h-96" />
+            :size="size" class="w-full h-full" />
         </div>
 
         <Customize>
diff --git a/src/demo/Backgrounds/ParticlesDemo.vue b/src/demo/Backgrounds/ParticlesDemo.vue
index 6db089a..0bf30b4 100644
--- a/src/demo/Backgrounds/ParticlesDemo.vue
+++ b/src/demo/Backgrounds/ParticlesDemo.vue
@@ -6,7 +6,7 @@
           <Particles :key="rerenderKey" :particle-colors="[color]" :particle-count="particleCount"
             :particle-spread="particleSpread" :speed="speed" :particle-base-size="baseSize"
             :move-particles-on-hover="moveParticlesOnHover" :alpha-particles="alphaParticles"
-            :disable-rotation="disableRotation" class="w-full h-96" />
+            :disable-rotation="disableRotation" class="w-full h-full" />
         </div>
 
         <Customize>
diff --git a/src/demo/Backgrounds/SilkDemo.vue b/src/demo/Backgrounds/SilkDemo.vue
index 1dc9001..8be0cd5 100644
--- a/src/demo/Backgrounds/SilkDemo.vue
+++ b/src/demo/Backgrounds/SilkDemo.vue
@@ -4,7 +4,7 @@
       <template #preview>
         <div class="demo-container">
           <Silk :speed="speed" :scale="scale" :color="color" :noise-intensity="noiseIntensity" :rotation="rotation"
-            class="w-full h-96" />
+            class="w-full h-full" />
         </div>
 
         <Customize>
diff --git a/src/demo/Backgrounds/WavesDemo.vue b/src/demo/Backgrounds/WavesDemo.vue
index 7e5a3ed..ba87eee 100644
--- a/src/demo/Backgrounds/WavesDemo.vue
+++ b/src/demo/Backgrounds/WavesDemo.vue
@@ -3,7 +3,7 @@
     <TabbedLayout>
       <template #preview>
         <div class="demo-container">
-          <Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-96" />
+          <Waves :wave-speed-x="waveSpeedX" :line-color="color" class="w-full h-full" />
         </div>
 
         <Customize>
diff --git a/src/demo/Components/CardSwapDemo.vue b/src/demo/Components/CardSwapDemo.vue
index b549d46..f52ceec 100644
--- a/src/demo/Components/CardSwapDemo.vue
+++ b/src/demo/Components/CardSwapDemo.vue
@@ -14,7 +14,7 @@
             </p>
           </div>
 
-          <div class="w-full lg:w-1/2 h-96 lg:h-full relative">
+          <div class="w-full lg:w-1/2 h-full lg:h-full relative">
             <CardSwap :key="rerenderKey" :width="500" :height="400" :card-distance="cardDistance"
               :vertical-distance="verticalDistance" :delay="delay" :skew-amount="skewAmount" :easing="easing"
               :pause-on-hover="pauseOnHover" @card-click="handleCardClick">
diff --git a/src/pages/LandingPage.vue b/src/pages/LandingPage.vue
index 8b200ea..187dfe3 100644
--- a/src/pages/LandingPage.vue
+++ b/src/pages/LandingPage.vue
@@ -1,7 +1,12 @@
 <template>
   <section class="landing-wrapper">
-    <div v-if="isMobile" class="mobile-hero-background-container">
-      <!-- Hero image will be added when available -->
+    <div v-if="isMobile" class="mobile-hero-background-container" style="z-index: 0;">
+      <img
+        :src="heroImage"
+        alt="Hero background"
+        class="mobile-hero-background-image"
+        style="transform: translateY(-200px);"
+      />
     </div>
 
     <PlasmaWave :y-offset="-300" :x-offset="100" :rotation-deg="-30" />
@@ -19,6 +24,7 @@ import PlasmaWave from '@/components/landing/PlasmaWave/PlasmaWave.vue'
 import Footer from '@/components/landing/Footer/Footer.vue'
 import FeatureCards from '@/components/landing/FeatureCards/FeatureCards.vue'
 import StartBuilding from '@/components/landing/StartBuilding/StartBuilding.vue'
+import heroImage from '@/assets/common/hero.webp'
 const isMobile = ref(false)
 
 const checkIsMobile = () => {