fixes

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>

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)
@@ -264,3 +272,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>

src/content/Backgrounds/LetterGlitch/LetterGlitch.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="relative w-full h-full overflow-hidden">
+  <div class="relative overflow-hidden">
-    <canvas ref="canvasRef" class="block w-full h-full" />
+    <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()
   
-  canvas.width = rect.width * dpr
+  const parentWidth = parent.parentElement?.offsetWidth || parent.offsetWidth || window.innerWidth
-  canvas.height = rect.height * dpr
+  const parentHeight = parent.parentElement?.offsetHeight || parent.offsetHeight || window.innerHeight
   
-  canvas.style.width = `${rect.width}px`
+  const width = Math.max(parentWidth, 300)
-  canvas.style.height = `${rect.height}px`
+  const height = Math.max(parentHeight, 300)
+
+  canvas.width = width * dpr
+  canvas.height = height * dpr
+
+  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()
 }
@@ -244,3 +249,21 @@ watch([() => props.glitchSpeed, () => props.smooth], () => {
   animate()
 })
 </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>

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
+    const dpr = window.devicePixelRatio || 1
-    canvas.height = rect.height
+    
-    canvas.style.width = rect.width + 'px'
+    let width = rect.width
-    canvas.style.height = rect.height + 'px'
+    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>

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
+    if (!container) return
-    const height = container.clientHeight
+    
+    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>

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>

src/css/base.css

@@ -28,3 +28,41 @@ body {
   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;
+  }
+}

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!')">

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>

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>
 

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>

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>

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>

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>

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">

src/pages/LandingPage.vue

@@ -1,7 +1,12 @@
 <template>
   <section class="landing-wrapper">
-    <div v-if="isMobile" class="mobile-hero-background-container">
+    <div v-if="isMobile" class="mobile-hero-background-container" style="z-index: 0;">
-      <!-- Hero image will be added when available -->
+      <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 = () => {