all letters and numeric complete and remove beanie from all file

src/pages/capital-letter/A.astro

@@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedAHeight = 35;
       animatedAScale = 0.65;
     } else{
@@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
       animatedAHeight = 20;
       animatedAScale = 0.73;
     }
@@ -97,8 +89,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -119,33 +109,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
-  
-  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
-  const duration = 3000; // Duration of the animation in milliseconds
-
-  // Create a scaling tween
-  this.tweens.add({
-    targets: sun,
-    scaleX: scaleFactor,
-    scaleY: scaleFactor,
-    duration: duration,
-    ease: 'Linear',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);
@@ -174,6 +137,19 @@ import Layout from "../../layouts/Layout.astro";
             fill: true // Apply shadow to fill (background color)
         }
       });
+      const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
     hideButton.setInteractive().on('pointerdown', () => {
       isDemoButtonClicked = false;
       firstScreen.setVisible(false);

src/pages/capital-letter/B.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedBHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedBHeight = 20;
     }
   // let hideButton;
@@ -92,8 +84,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -116,8 +106,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -132,17 +121,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale);

src/pages/capital-letter/C.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedAHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedAHeight = 20;
     }
   // let hideButton;
@@ -89,7 +81,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -112,9 +103,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
-  
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
 
@@ -127,17 +115,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/D.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedDHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedDHeight = 20;
     }
   // let hideButton;
@@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterD').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/E.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedAHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedAHeight = 20;
     }
   function preload() {
@@ -92,7 +84,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -115,7 +106,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -130,17 +120,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/F.astro

@@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedFHeight = 35;
       animatedFScale = 0.65;
     } else{
@@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
       animatedFHeight = 20;
       animatedFScale = 0.73;
     }
@@ -96,8 +88,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -118,8 +108,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -133,17 +121,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/G.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedGHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedGHeight = 20;
     }
   // let hideButton;
@@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterG').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/H.astro

@@ -56,11 +56,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
-      animatedHHeight = 35;
       animatedHScale = 0.65;
     } else{
       cloudeSize = 500;
@@ -74,10 +69,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
       animatedHHeight = 20;
       animatedHScale = 0.73;
     }
@@ -96,8 +87,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -118,7 +107,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -133,17 +121,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterH').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/I.astro

@@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedIHeight = 35;
       animatedIScale = 0.65;
     } else{
@@ -74,11 +70,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
-      animatedIHeight = 20;
       animatedIScale = 0.73;
     }
   function preload() {
@@ -96,8 +87,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -118,7 +107,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -133,17 +121,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterI').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/J.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedJHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedJHeight = 20;
     }
   // let hideButton;
@@ -89,7 +81,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -112,7 +103,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -127,17 +117,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterJ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/K.astro

@@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedKHeight = 35;
       animatedKScale = 0.65;
     } else{
@@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
       animatedKHeight = 20;
       animatedKScale = 0.73;
     }
@@ -96,8 +88,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -118,7 +108,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -133,17 +122,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'letterK').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/L.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedLHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedLHeight = 20;
     }
   // let hideButton;
@@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterL').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
@@ -153,7 +132,6 @@ import Layout from "../../layouts/Layout.astro";
     maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
     const mask = maskGraphics.createGeometryMask();
 
- 
 
     let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
         font: '900 24px quicksand',

src/pages/capital-letter/M.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedMHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedMHeight = 20;
     }
   function preload() {
@@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterM').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/N.astro

@@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedNHeight = 35;
       animatedNScale = 0.65;
     } else{
@@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
       animatedNHeight = 20;
       animatedNScale = 0.73;
     }
@@ -97,8 +89,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -119,7 +109,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -134,17 +123,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterN').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/O.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedOHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedOHeight = 20;
     }
   // let hideButton;
@@ -89,7 +81,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -112,7 +103,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -127,17 +117,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterO').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/P.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedPHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedPHeight = 20;
     }
   // let hideButton;
@@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterP').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/Q.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedQHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedQHeight = 20;
     }
   // let hideButton;
@@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,7 +105,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -129,17 +119,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterQ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/R.astro

@@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedRHeight = 35;
       animatedRScale = 0.65;
     } else{
@@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
       animatedRHeight = 20;
       animatedRScale = 0.73;
     }
@@ -97,8 +89,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -119,7 +109,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -134,17 +123,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/S.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedSHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedSHeight = 20;
     }
   // let hideButton;
@@ -89,7 +81,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -112,7 +103,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -127,17 +117,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterS').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/T.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedTHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedTHeight = 20;
     }
   // let hideButton;
@@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,8 +105,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -129,17 +118,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterT').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/U.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedUHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedUHeight = 20;
     }
   // let hideButton;
@@ -89,7 +81,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -112,8 +103,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -127,17 +116,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterU').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/V.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedVHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedVHeight = 20;
     }
   // let hideButton;
@@ -90,7 +82,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -113,7 +104,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -128,17 +118,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterV').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/W.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedWHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedWHeight = 20;
     }
   function preload() {
@@ -90,7 +82,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -113,7 +104,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
@@ -128,17 +118,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterW').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/X.astro

@@ -52,10 +52,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedXHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +65,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
       animatedXHeight = 20;
     }
   // let hideButton;
@@ -91,7 +83,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,8 +105,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -129,17 +118,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 30, customHeight / 2 + letterHeight, 'letterX').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/Y.astro

@@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedYHeight = 35;
       animatedYScale = 0.65;
     } else{
@@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
       animatedYHeight = 20;
       animatedYScale = 0.73;
     }
@@ -97,8 +89,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -119,8 +109,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -134,17 +122,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/capital-letter/Z.astro

@@ -56,10 +56,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
       animatedZHeight = 35;
       animatedZScale = 0.65;
     } else{
@@ -74,10 +70,6 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
       animatedZHeight = 20;
       animatedZScale = 0.73;
     }
@@ -96,8 +88,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -118,8 +108,6 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -133,17 +121,6 @@ import Layout from "../../layouts/Layout.astro";
     ease: 'Linear',
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
-  });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
   });
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterZ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);

src/pages/numeric/0.astro

@@ -0,0 +1,268 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 30;
+      letterScale = 1.1;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+      animated0videoScale = 0.6;
+      animated0Height = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 10;
+      letterScale = 1.2;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+      animated0videoScale = 0.70;
+      animated0Height = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animated0', '/assets/animated-letter/number_0.mp4');
+    this.load.svg('number0', '/assets/numeric/n0.svg');
+    this.load.svg('layer1', '/assets/numeric/n0.svg');
+    this.load.audio('audioOne', '/assets/audio/hook-around-close.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number0').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated0').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+      const baseFontSize = 20;
+      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);
+
+      // Play the video
+      animatedLetter.play();
+      animatedLetter.setVisible(false);
+
+      // You can set additional properties for the video, such as loop and mute:
+      animatedLetter.setLoop(true); // Loop the video
+      animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+      });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 16 : customWidth * 0.70;
+      textY = isMobile ? customHeight / 6.5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 0) {
+          
+            firstTextLayer.setVisible(false);
+            firstLayer.setAlpha(1);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+       
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+
+
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/numeric/1.astro

@@ -0,0 +1,271 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 30;
+      letterScale = 1.1;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animated1videoScale = 0.6;
+      animated1Height = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 10;
+      letterScale = 1.2;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animated1videoScale = 0.70;
+      animated1Height = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animated1', '/assets/animated-letter/number_1.mp4');
+    this.load.svg('number1', '/assets/numeric/n1.svg');
+    this.load.svg('layer1', '/assets/numeric/n1.svg');
+    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number1').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated1').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+      const baseFontSize = 20;
+      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);
+
+      // Play the video
+      animatedLetter.play();
+      animatedLetter.setVisible(false);
+
+      // You can set additional properties for the video, such as loop and mute:
+      animatedLetter.setLoop(true); // Loop the video
+      animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+      });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.70;
+      textY = isMobile ? customHeight / 6.5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 0) {
+          
+            firstTextLayer.setVisible(false);
+            firstLayer.setAlpha(1);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+       
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+
+
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/numeric/2.astro

@@ -0,0 +1,304 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 58;
+      letterScale = 1;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animated2Scale = 0.55;
+      animated2Height = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 50;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animated2Scale = 0.55;
+      animated2Height = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animated2', '/assets/animated-letter/number_2.mp4');
+    this.load.svg('number2', '/assets/numeric/n2.svg');
+    this.load.svg('layer1', '/assets/numeric/n2.svg');
+    this.load.svg('layer2', '/assets/numeric/n2.svg');
+    this.load.audio('audioOne', '/assets/audio/roll-slant.mp3');
+    this.load.audio('audioTwo', '/assets/audio/slide.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number2').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number2').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated2').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Roll Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=100) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/numeric/3.astro

@@ -0,0 +1,303 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 48;
+      letterScale = 1;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animated3Scale = 0.55;
+      animated3Height = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 30;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animated3Scale = 0.55;
+      animated3Height = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animated3', '/assets/animated-letter/number_3.mp4');
+    this.load.svg('number3', '/assets/numeric/n3.svg');
+    this.load.svg('layer1', '/assets/numeric/n3.svg');
+    this.load.svg('layer2', '/assets/numeric/n3.svg');
+    this.load.audio('audioOne', '/assets/audio/roll-around.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number3').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number3').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated3').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioOne');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=100) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/numeric/4.astro

@@ -0,0 +1,333 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+//   let x = 100;
+
+// // Use x
+// console.log(x);
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 20;
+      letterScale = 1.2;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+       
+      animated4Height = 35;
+      animated4Scale = 0.65;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 10;
+      letterScale = 1.3;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+        
+      animated4Height = 20;
+      animated4Scale = 0.7;
+    }
+  function preload() {
+    this.load.video('animated4', '/assets/animated-letter/number_4.mp4');
+    this.load.svg('number4', '/assets/numeric/n4.svg');
+    this.load.svg('layer1', '/assets/numeric/n4_l1.svg');
+    this.load.svg('layer2', '/assets/numeric/n4_l2.svg');
+    this.load.svg('layer3', '/assets/numeric/n4_l3.svg');
+    this.load.audio('audioOne', '/assets/audio/down.mp3');
+    this.load.audio('audioTwo', '/assets/audio/slide.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+ 
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', });
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number4').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number4').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated4').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+        // add function after end video;
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      const thirdTextLayer = this.add.text(textX, textY, '3. Down', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioThreeAudio = this.sound.add('audioOne');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+        let thirdDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 70) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+            thirdLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+        secondLayer.on('dragstart', (pointer) => {
+        secondDragStartPoint.x = pointer.x;
+        secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 70) {
+            secondTextLayer.setVisible(false);
+            thirdTextLayer.setVisible(true);
+            audioThreeAudio.play();
+            thirdLayer.setVisible(true);
+            secondLayer.setAlpha(1);
+            thirdLayer.setAlpha(0.5);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+        // Add this code for thirdLayer
+        thirdLayer.on('dragstart', (pointer) => {
+        thirdDragStartPoint.x = pointer.x;
+        thirdDragStartPoint.y = pointer.y;
+        });
+
+        thirdLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            thirdLayer.setAlpha(1);
+            thirdTextLayer.setVisible(false);
+        } else {
+            thirdLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        // console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+}
+
+</script>

src/pages/numeric/5.astro

@@ -0,0 +1,334 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+//   let x = 100;
+
+// // Use x
+// console.log(x);
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 50;
+      letterScale = 1;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+       
+      animated5Height = 35;
+      animated5Scale = 0.55;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 40;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+        
+      animated5Height = 20;
+      animated5Scale = 0.6;
+    }
+  function preload() {
+    this.load.video('animated5', '/assets/animated-letter/number_5.mp4');
+    this.load.svg('number5', '/assets/numeric/n5.svg');
+    this.load.svg('layer1', '/assets/numeric/n5_l1.svg');
+    this.load.svg('layer2', '/assets/numeric/n5_l2.svg');
+    this.load.svg('layer3', '/assets/numeric/n5_l3.svg');
+    this.load.audio('audioOne', '/assets/audio/down.mp3');
+    this.load.audio('audioTwo', '/assets/audio/roll-around.mp3');
+    this.load.audio('audioThree', '/assets/audio/slide.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+ 
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Number : 5", { font: '700 40px quicksand', fill: '#05b3a4', });
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number5').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number5').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated5').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+        // add function after end video;
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioThreeAudio = this.sound.add('audioThree');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+        let thirdDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 70) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+            thirdLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+        secondLayer.on('dragstart', (pointer) => {
+        secondDragStartPoint.x = pointer.x;
+        secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 70) {
+            secondTextLayer.setVisible(false);
+            thirdTextLayer.setVisible(true);
+            audioThreeAudio.play();
+            thirdLayer.setVisible(true);
+            secondLayer.setAlpha(1);
+            thirdLayer.setAlpha(0.5);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+        // Add this code for thirdLayer
+        thirdLayer.on('dragstart', (pointer) => {
+        thirdDragStartPoint.x = pointer.x;
+        thirdDragStartPoint.y = pointer.y;
+        });
+
+        thirdLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            thirdLayer.setAlpha(1);
+            thirdTextLayer.setVisible(false);
+        } else {
+            thirdLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        // console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+}
+
+</script>

src/pages/numeric/6.astro

@@ -0,0 +1,304 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 30; 
+      letterHeight = 30;
+      letterScale = 1;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animated6Scale = 0.55;
+      animated6Height = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 10;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animated6Scale = 0.55;
+      animated6Height = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animated6', '/assets/animated-letter/number_6.mp4');
+    this.load.svg('number6', '/assets/numeric/n6.svg');
+    this.load.svg('layer1', '/assets/numeric/n6_l1.svg');
+    this.load.svg('layer2', '/assets/numeric/n6_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/curve-down.mp3');
+    this.load.audio('audioTwo', '/assets/audio/loop.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number6').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number6').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated6').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Curve Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Loop',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=100) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/numeric/7.astro

@@ -0,0 +1,304 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 30; 
+      letterHeight = 30;
+      letterScale = 1;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animated7Scale = 0.55;
+      animated7Height = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 10;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animated7Scale = 0.55;
+      animated7Height = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animated7', '/assets/animated-letter/number_7.mp4');
+    this.load.svg('number7', '/assets/numeric/n7.svg');
+    this.load.svg('layer1', '/assets/numeric/n7_l1.svg');
+    this.load.svg('layer2', '/assets/numeric/n7_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/slide.mp3');
+    this.load.audio('audioTwo', '/assets/audio/slant.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number7').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number7').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated7').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=100) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/numeric/8.astro

@@ -0,0 +1,304 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 30; 
+      letterHeight = 30;
+      letterScale = 1;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animated8Scale = 0.55;
+      animated8Height = 15;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 10;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animated8Scale = 0.55;
+      animated8Height = 0;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animated8', '/assets/animated-letter/number_8.mp4');
+    this.load.svg('number8', '/assets/numeric/n8.svg');
+    this.load.svg('layer1', '/assets/numeric/n8_l1.svg');
+    this.load.svg('layer2', '/assets/numeric/n8_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/hook-snake.mp3');
+    this.load.audio('audioTwo', '/assets/audio/roll-up.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number8').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number8').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated8').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Hook Snake',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Roll Up',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=100) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/numeric/9.astro

@@ -0,0 +1,304 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 30; 
+      letterHeight = 30;
+      letterScale = 1;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animated9Scale = 0.55;
+      animated9Height = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 10;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animated9Scale = 0.55;
+      animated9Height = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animated9', '/assets/animated-letter/number_9.mp4');
+    this.load.svg('number9', '/assets/numeric/n9.svg');
+    this.load.svg('layer1', '/assets/numeric/n9_l1.svg');
+    this.load.svg('layer2', '/assets/numeric/n9_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/curve-around.mp3');
+    this.load.audio('audioTwo', '/assets/audio/tall-down.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'number9').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'number9').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animated9').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Curve Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 0) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=100) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/small-letter/a.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedAHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +66,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedAHeight = 20;
     }
   // let hideButton;
@@ -91,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,8 +108,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -130,17 +123,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2).setScale(letterScale);

src/pages/small-letter/b.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedBHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +66,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedBHeight = 20;
     }
   // let hideButton;
@@ -91,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,8 +108,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -130,17 +123,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterB').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterB').setDepth(2).setScale(letterScale);

src/pages/small-letter/c.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedCHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +66,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedCHeight = 20;
     }
   // let hideButton;
@@ -89,7 +83,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -112,8 +106,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -128,17 +121,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterC').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterC').setDepth(2).setScale(letterScale);

src/pages/small-letter/d.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedVideScale = 0.6
       animatedDHeight = 32;
     } else{
@@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedVideScale = 0.9;
       animatedDHeight = 20;
     }
@@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterD').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 30, customHeight / 2 + letterHeight, 'letterD').setDepth(2).setScale(letterScale);

src/pages/small-letter/e.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedEHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +66,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedEHeight = 20;
     }
   // let hideButton;
@@ -91,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,8 +108,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -130,17 +123,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterE').setDepth(2).setScale(letterScale);

src/pages/small-letter/f.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedFHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +66,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedFHeight = 20;
     }
   // let hideButton;
@@ -91,7 +85,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -114,8 +108,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -130,17 +123,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterF').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'letterF').setDepth(2).setScale(letterScale);

src/pages/small-letter/g.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedVideoScale = 0.63;
       animatedGHeight = 32;
     } else{
@@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedVideoScale = 0.7;
       animatedGHeight = 20;
     }
@@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterG').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterG').setDepth(2).setScale(letterScale);

src/pages/small-letter/h.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedVideoScale = 0.63;
       animatedHHeight = 32;
     } else{
@@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedVideoScale = 0.7;
       animatedHHeight = 20;
     }
@@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'letterH').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 25, customHeight / 2 + letterHeight, 'letterH').setDepth(2).setScale(letterScale);

src/pages/small-letter/i.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedVideoScale = 0.5;
       animatedIHeight = 32;
     } else{
@@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedVideoScale = 0.55;
       animatedIHeight = 20;
     }
@@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'letterI').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'letterI').setDepth(2).setScale(letterScale);

src/pages/small-letter/j.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedVideoScale = 0.5;
       animatedJHeight = 32;
     } else{
@@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedVideoScale = 0.7;
       animatedJHeight = 20;
     }
@@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 - 20, customHeight / 2 + letterJeight, 'letterJ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 - 20 , customHeight / 2 + letterJeight, 'letterJ').setDepth(2).setScale(letterScale);

src/pages/small-letter/k.astro

@@ -56,10 +56,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
+       
       animatedKHeight = 35;
       animatedKScale = 0.65;
     } else{
@@ -74,10 +71,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
+        
       animatedKHeight = 20;
       animatedKScale = 0.8;
     }
@@ -97,8 +91,8 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+ 
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -119,8 +113,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -135,17 +128,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterK').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterK').setDepth(2).setScale(letterScale);

src/pages/small-letter/m.astro

@@ -56,10 +56,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.365;
-      beanieWidth = 135;
-      beanieHeight = 170;
+       
       animatedMHeight = 35;
       animatedMScale = 0.5;
     } else{
@@ -74,10 +71,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.45;
-      beanieWidth = 200;
-      beanieHeight = 255;
+        
       animatedMHeight = 20;
       animatedMScale = 0.66;
     }
@@ -96,8 +90,8 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    // this.load.image('beanie', '/assets/beanie.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+ 
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -118,8 +112,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -134,17 +127,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterM').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setDepth(2).setScale(letterScale);

src/pages/small-letter/n.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedVideoScale = 0.63;
       animatedNHeight = 32;
     } else{
@@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedVideoScale = 0.7;
       animatedNHeight = 20;
     }
@@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'letterN').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'letterN').setDepth(2).setScale(letterScale);

src/pages/small-letter/o.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedOHeight = 32;
     } else{
       cloudeSize = 500;
@@ -69,10 +66,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedOHeight = 20;
     }
   // let hideButton;
@@ -89,7 +83,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -112,8 +106,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -128,17 +121,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterO').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterO').setDepth(2).setScale(letterScale);

src/pages/small-letter/p.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedVideoScale = 0.63;
       animatedPHeight = 32;
     } else{
@@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedVideoScale = 0.7;
       animatedPHeight = 20;
     }
@@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'letterP').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'letterP').setDepth(2).setScale(letterScale);

src/pages/small-letter/q.astro

@@ -52,10 +52,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-      beanieScale = 0.35;
-      beanieScalePlus = 0.38;
-      beanieWidth = 135;
-      beanieHeight = 170;
+         
       animatedVideoScale = 0.63;
       animatedQHeight = 32;
     } else{
@@ -70,10 +67,7 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-      beanieScale = 0.4;
-      beanieScalePlus = 0.44;
-      beanieWidth = 200;
-      beanieHeight = 245;
+          
       animatedVideoScale = 0.7;
       animatedQHeight = 20;
     }
@@ -93,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-    this.load.image('beanie', '/assets/beanieImage.png');
+     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -116,8 +110,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
-
+ 
   
   const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
   const duration = 3000; // Duration of the animation in milliseconds
@@ -132,17 +125,7 @@ import Layout from "../../layouts/Layout.astro";
     yoyo: true, // Makes the animation play in reverse
     repeat: -1 // Repeat indefinitely
   });
-  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
-  const beanieduration = 2500;
-  this.tweens.add({
-    targets: beanie,
-    scaleX: beaniescaleFactor + 0.004,
-    scaleY: beaniescaleFactor,
-    duration: beanieduration,
-    ease: 'Redial',
-    yoyo: true, // Makes the animation play in reverse
-    repeat: -1 // Repeat indefinitely
-  });
+   
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
     this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'letterQ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'letterQ').setDepth(2).setScale(letterScale);
@@ -259,7 +242,7 @@ import Layout from "../../layouts/Layout.astro";
         firstLayer.on('drag', (pointer) => {
         const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
 
-        if (distance >= 100) {
+        if (distance >= 20) {
           
             firstTextLayer.setVisible(false);
             secondTextLayer.setVisible(true);

src/pages/small-letter/r.astro

@@ -0,0 +1,303 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterReight = 20;
+      letterScale = 1;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animatedVideoScale = 0.63;
+      animatedRHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterReight = -10;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animatedVideoScale = 0.7;
+      animatedRHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedR', '/assets/animated-letter/small_r.mp4');
+    this.load.svg('letterR', '/assets/small-letter/rs.svg');
+    this.load.svg('layer1', '/assets/small-letter/rs_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/rs_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/small-down.mp3');
+    this.load.audio('audioTwo', '/assets/audio/roll.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : r", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 + 30, customHeight / 2 + letterReight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2  + 30, customHeight / 2 + letterReight, 'letterR').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterReight, 'animatedR').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : r', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2  + 30, customHeight / 2 + letterReight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2  + 30, customHeight / 2 + letterReight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Roll',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=20) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/small-letter/s.astro

@@ -0,0 +1,270 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 40;
+      letterScale = 1.3;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animatedVideoScale = 0.6;
+      animatedSHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 30;
+      letterScale = 1.5;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animatedVideoScale = 0.73;
+      animatedSHeight = 20;
+    }
+
+  function preload() {
+    this.load.video('animatedS', '/assets/animated-letter/small_s.mp4');
+    this.load.svg('letterS', '/assets/small-letter/ss.svg');
+    this.load.svg('layer1', '/assets/small-letter/ss.svg');
+    this.load.audio('audioOne', '/assets/audio/hook-around-snake.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : s", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterS').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterS').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedS').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+      const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+      const baseFontSize = 20;
+      const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+      const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : s', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);
+
+      // Play the video
+      animatedLetter.play();
+      animatedLetter.setVisible(false);
+
+      // You can set additional properties for the video, such as loop and mute:
+      animatedLetter.setLoop(true); // Loop the video
+      animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+      });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 13 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 6.5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Snake',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 50) {
+          
+            firstTextLayer.setVisible(false);
+            firstLayer.setAlpha(1);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+       
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+
+
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/small-letter/t.astro

@@ -0,0 +1,303 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterReight = 50;
+      letterScale = 1.3;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animatedVideoScale = 0.63;
+      animatedTHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterReight = 45;
+      letterScale = 1.3;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animatedVideoScale = 0.7;
+      animatedTHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedT', '/assets/animated-letter/small_t.mp4');
+    this.load.svg('letterR', '/assets/small-letter/ts.svg');
+    this.load.svg('layer1', '/assets/small-letter/ts_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/ts_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/tall-down.mp3');
+    this.load.audio('audioTwo', '/assets/audio/cross.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : t", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterReight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterReight, 'letterR').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterReight, 'animatedT').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : t', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterReight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterReight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=20) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/small-letter/u.astro

@@ -0,0 +1,303 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterUeight = 30;
+      letterScale = 1.3;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animatedVideoScale = 0.63;
+      animatedUHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterUeight = 20;
+      letterScale = 1.3;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animatedVideoScale = 0.7;
+      animatedUHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedU', '/assets/animated-letter/small_u.mp4');
+    this.load.svg('letterU', '/assets/small-letter/us.svg');
+    this.load.svg('layer1', '/assets/small-letter/us_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/us_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/small-down-curve-up.mp3');
+    this.load.audio('audioTwo', '/assets/audio/small-down.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : u", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 + 20, customHeight / 2 + letterUeight, 'letterU').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterUeight, 'letterU').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterUeight, 'animatedU').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : u', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2  + 20, customHeight / 2 + letterUeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 25 : customWidth * 0.70;
+      textY = isMobile ? customHeight / 6 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Small Down Curve Up',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2  + 20, customHeight / 2 + letterUeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Small Down',{ font: '700 35px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+      
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=20) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/small-letter/v.astro

@@ -0,0 +1,302 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterVHeight = 35;
+      letterScale = 1.3;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animatedVideoScale = 0.63;
+      animatedVHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterVHeight = 20;
+      letterScale = 1.3;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animatedVideoScale = 0.7;
+      animatedVHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedV', '/assets/animated-letter/small_v.mp4');
+    this.load.svg('letterV', '/assets/small-letter/vs.svg');
+    this.load.svg('layer1', '/assets/small-letter/vs_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/vs_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/slant.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : v", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterVHeight, 'letterV').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'letterV').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterVHeight, 'animatedV').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : v', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioOne');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=20) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/small-letter/w.astro

@@ -0,0 +1,370 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer, fourthLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 40;
+      letterScale = 1.3;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animatedVideoScale = 0.6;
+      animatedWHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 20;
+      letterScale = 1.5;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animatedVideoScale = 0.73;
+      animatedWHeight = 20;
+    }
+  function preload() {
+    this.load.video('animatedW', '/assets/animated-letter/small_w.mp4');
+    this.load.svg('letterW', '/assets/small-letter/ws.svg');
+    this.load.svg('layer1', '/assets/small-letter/ws_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/ws_l2.svg');
+    this.load.svg('layer3', '/assets/small-letter/ws_l3.svg');
+    this.load.svg('layer4', '/assets/small-letter/ws_l4.svg');
+    this.load.audio('audioOne', '/assets/audio/slant.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : w", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterW').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterW').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedW').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : w', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioOne');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      const thirdTextLayer = this.add.text(textX, textY, '3. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioThreeAudio = this.sound.add('audioOne');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+      fourthLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer4').setScale(letterScale);
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      const fourthTextLayer = this.add.text(textX, textY, '4. Slant', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioFourthAudio = this.sound.add('audioOne');
+      fourthTextLayer.setVisible(false);
+      fourthLayer.setDepth(1.1);
+      // fourthLayer.setScale(1.15);
+      fourthLayer.setAlpha(0.5);
+      fourthLayer.setInteractive({ draggable: true });
+      fourthLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+        let thirdDragStartPoint = { x: 0, y: 0 };
+        let fourthDragStartPoint = { x: 0, y: 0 };
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+            thirdLayer.setAlpha(0.5);
+            fourthLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+        secondDragStartPoint.x = pointer.x;
+        secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            secondTextLayer.setVisible(false);
+            thirdTextLayer.setVisible(true);
+            audioThreeAudio.play();
+            thirdLayer.setVisible(true);
+            secondLayer.setAlpha(1);
+            thirdLayer.setAlpha(0.5);
+            fourthLayer.setAlpha(0.5);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+        // Add this code for thirdLayer
+        thirdLayer.on('dragstart', (pointer) => {
+        thirdDragStartPoint.x = pointer.x;
+        thirdDragStartPoint.y = pointer.y;
+        });
+
+        thirdLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            thirdLayer.setAlpha(1);
+            thirdTextLayer.setVisible(false);
+            fourthTextLayer.setVisible(true);
+            fourthLayer.setVisible(true);
+            fourthLayer.setAlpha(0.5);
+            audioFourthAudio.play();
+        } else {
+            thirdLayer.setAlpha(0.5);
+        }
+        });
+
+         fourthLayer.on('dragstart', (pointer) => {
+        fourthDragStartPoint.x = pointer.x;
+        fourthDragStartPoint.y = pointer.y;
+        });
+
+        fourthLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(fourthDragStartPoint.x, fourthDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            fourthLayer.setAlpha(1);
+            fourthTextLayer.setVisible(false);
+        } else {
+            fourthLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+
+      // Start Position 626 317
+
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/small-letter/x.astro

@@ -0,0 +1,303 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterXHeight = 35;
+      letterScale = 1.3;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animatedXideoScale = 0.63;
+      animatedXHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterXHeight = 20;
+      letterScale = 1.3;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animatedXideoScale = 0.7;
+      animatedXHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedX', '/assets/animated-letter/small_x.mp4');
+    this.load.svg('letterX', '/assets/small-letter/xs.svg');
+    this.load.svg('layer1', '/assets/small-letter/xs_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/xs_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/slant.mp3');
+    this.load.audio('audioTwo', '/assets/audio/cross.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : x", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterXHeight, 'letterX').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'letterX').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterXHeight, 'animatedX').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : x', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=20) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/small-letter/y.astro

@@ -0,0 +1,303 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterYHeight = - 10;
+      letterScale = 1;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animatedYideoScale = 0.63;
+      animatedYHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterYHeight = - 30;
+      letterScale = 1.2;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animatedYideoScale = 0.7;
+      animatedYHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedY', '/assets/animated-letter/small_y.mp4');
+    this.load.svg('letterY', '/assets/small-letter/ys.svg');
+    this.load.svg('layer1', '/assets/small-letter/ys_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/ys_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/slant-right.mp3');
+    this.load.audio('audioTwo', '/assets/audio/slant-tail.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : y", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterYHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterYHeight, 'letterY').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterYHeight, 'animatedY').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterYHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterYHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Slant Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=20) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+
+}
+
+</script>

src/pages/small-letter/z.astro

@@ -0,0 +1,332 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="Guided Letter Tracing Game">
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+    </main>
+</Layout>
+<script is:inline>
+  const isMobile = window.innerWidth <= 768;
+  const drawingZone = {
+    x: isMobile ? 0 : window.innerWidth / 4,
+    y: window.innerHeight / 4,
+    width: isMobile ? window.innerWidth : window.innerWidth / 2,
+    height: window.innerHeight / 2,
+  };
+
+  const config = {
+    type: Phaser.AUTO,
+    width: window.innerWidth,
+    height: window.innerHeight,
+    backgroundColor: 0xFFFFFF,
+    scale: {
+      mode: Phaser.Scale.FIT,
+      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+    },
+    scene: {
+      preload: preload,
+      create: create,
+      update: update
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+//   let x = 100;
+
+// // Use x
+// console.log(x);
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 30;
+      letterScale = 1.3;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+       
+      animatedZHeight = 35;
+      animatedZScale = 0.5;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 10;
+      letterScale = 1.5;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+        
+      animatedZHeight = 20;
+      animatedZScale = 0.66;
+    }
+  function preload() {
+    this.load.video('animatedZ', '/assets/animated-letter/small_z.mp4');
+    this.load.svg('letterZ', '/assets/small-letter/zs.svg');
+    this.load.svg('layer1', '/assets/small-letter/zs_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/zs_l2.svg');
+    this.load.svg('layer3', '/assets/small-letter/zs_l3.svg');
+    this.load.audio('audioOne', '/assets/audio/slide.mp3');
+    this.load.audio('audioTwo', '/assets/audio/slant.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+ 
+     
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : z", { font: '700 40px quicksand', fill: '#05b3a4', });
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+ 
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+   
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'letterZ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterZ').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedZ').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    hideButton.setInteractive().on('pointerdown', () => {
+      isDemoButtonClicked = false;
+      firstScreen.setVisible(false);
+      hideButton.setVisible(false);  // Hide the "Hide" button
+      demoButton.setVisible(true);   // Show the "Demo" button
+      graphics.setVisible(true);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.setVisible(true);
+    });
+
+    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+    const baseFontSize = 20;
+    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+        // add function after end video;
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+      thirdLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
+      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
+      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioThreeAudio = this.sound.add('audioOne');
+      thirdTextLayer.setVisible(false);
+      thirdLayer.setDepth(1.1);
+      // thirdLayer.setScale(1.15);
+      thirdLayer.setAlpha(0.5);
+      thirdLayer.setInteractive({ draggable: true });
+      thirdLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+        let thirdDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+            thirdLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+        secondLayer.on('dragstart', (pointer) => {
+        secondDragStartPoint.x = pointer.x;
+        secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            secondTextLayer.setVisible(false);
+            thirdTextLayer.setVisible(true);
+            audioThreeAudio.play();
+            thirdLayer.setVisible(true);
+            secondLayer.setAlpha(1);
+            thirdLayer.setAlpha(0.5);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+        // Add this code for thirdLayer
+        thirdLayer.on('dragstart', (pointer) => {
+        thirdDragStartPoint.x = pointer.x;
+        thirdDragStartPoint.y = pointer.y;
+        });
+
+        thirdLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+            thirdLayer.setAlpha(1);
+            thirdTextLayer.setVisible(false);
+        } else {
+            thirdLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        // console.log("Start Position", pointer.x, pointer.y)
+      });
+
+      this.input.on('pointerup', function () {
+        isDrawing = false;
+      });
+
+      this.input.on('pointermove', function (pointer) {
+        if (!isDrawing) return;
+
+        graphics.lineTo(pointer.x, pointer.y);
+        graphics.strokePath();
+      });
+  }
+
+function update() {
+}
+
+</script>