Develop: fixed issues (#153)

Author: recursivezero

CHANGELOG.md

@@ -29,7 +29,13 @@ Created Repo from template
 ## [3.2.0] - 2025-07-20
 
 - Added Poem section
-- update CNAME
+
+
+## [3.2.2] - 2025-07-21
+
+- Update Storey page images issues
+- Mobile view fixed for pages 
+- FAQs updated
 
 ### [Unreleased]
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@recursivezero/abcd",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "description": "A website for our kids trial phase of abcdkbd.com",
   "homepage": "https://abcdkbd.com",
   "displayName": "abcd",

package.json

@@ -13,16 +13,17 @@
   position: relative;
 }
 
-.slot {
-  height: 100%;
-  border-radius: 4px;
-  z-index: 10;
-  width: 100%;
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  justify-content: space-evenly;
-  align-items: center;
+.slot , .context{
+    border-radius: inherit;
+    position: absolute;
+    z-index: 10;
+    width:  100%;
+    height: 100%;
+    display: flex;
+    box-sizing: border-box;
+    flex-direction: column;
+    justify-content: space-evenly;
+    align-items: center;
 }
 
 .slot > div {
@@ -78,7 +79,6 @@
   animation-delay: 0s;
 }
 
-/* copy code from here */
 .bubble_square li:nth-child(2) {
   left: 10%;
   width: 20px;
@@ -183,8 +183,6 @@
   animation-duration: 11s;
 }
 
-/* copy code till here */
-
 @keyframes animate {
   0% {
     transform: translateY(0) rotate(0deg);

src/assets/icons/close.svg

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+
 :root {
   --t: 0.8s;
   --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
@@ -90,10 +91,9 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  justify-content: center;
+  justify-content: start;
   flex: 1;
   width: 100%;
-  max-width: 800px;
 }
 
 .image-container {
@@ -334,7 +334,6 @@
 @media (max-width: 768px) {
   .alphabet-wrapper {
     padding: 1.5rem 1rem;
-    margin-top: 10rem;
     justify-content: flex-start;
   }
 

src/assets/icons/confetti.svg

@@ -0,0 +1,122 @@
+#confetti rect {
+  opacity: 0;
+}
+
+#confetti rect:nth-child(1) {
+  transform-origin: 45px 5px;
+  transform: rotate(-145deg);
+  animation: blast 631ms 88ms infinite ease-out;
+}
+
+#confetti rect:nth-child(2) {
+  transform-origin: 87px 5px;
+  transform: rotate(164deg);
+  animation: blast 442ms 131ms infinite ease-out;
+}
+
+#confetti rect:nth-child(3) {
+  transform-origin: 128px 6px;
+  transform: rotate(4deg);
+  animation: blast 662ms 92ms infinite ease-out;
+}
+
+#confetti rect:nth-child(4) {
+  transform-origin: 170px 6px;
+  transform: rotate(-175deg);
+  animation: blast 593ms 17ms infinite ease-out;
+}
+
+#confetti rect:nth-child(5) {
+  transform-origin: 213px 5px;
+  transform: rotate(-97deg);
+  animation: blast 476ms 122ms infinite ease-out;
+}
+
+#confetti rect:nth-child(6) {
+  transform-origin: 255px 6px;
+  transform: rotate(57deg);
+  animation: blast 381ms 271ms infinite ease-out;
+}
+
+#confetti rect:nth-child(7) {
+  transform-origin: 297px 5px;
+  transform: rotate(-46deg);
+  animation: blast 619ms 131ms infinite ease-out;
+}
+
+#confetti rect:nth-child(8) {
+  transform-origin: 338px 6px;
+  transform: rotate(-65deg);
+  animation: blast 668ms 85ms infinite ease-out;
+}
+
+#confetti rect:nth-child(9) {
+  transform-origin: 380px 6px;
+  transform: rotate(13deg);
+  animation: blast 377ms 128ms infinite ease-out;
+}
+
+#confetti rect:nth-child(10) {
+  transform-origin: 423px 5px;
+  transform: rotate(176deg);
+  animation: blast 508ms 311ms infinite ease-out;
+}
+
+#confetti rect:nth-child(11) {
+  transform-origin: 465px 5px;
+  transform: rotate(108deg);
+  animation: blast 595ms 108ms infinite ease-out;
+}
+
+#confetti rect:nth-child(12) {
+  transform-origin: 506px 6px;
+  transform: rotate(62deg);
+  animation: blast 375ms 105ms infinite ease-out;
+}
+
+#confetti rect:nth-child(13) {
+  transform-origin: 549px 5px;
+  transform: rotate(16deg);
+  animation: blast 491ms 149ms infinite ease-out;
+}
+
+/* pattern-based styling */
+#confetti rect:nth-child(odd) {
+  fill: #65bb5c;
+}
+
+#confetti rect:nth-child(even) {
+  fill: #33aaff;
+}
+
+#confetti rect:nth-child(4n) {
+  fill: #f23b14;
+  animation-duration: 1400ms !important;
+}
+
+#confetti rect:nth-child(3n) {
+  animation-duration: 1750ms !important;
+  animation-delay: 700ms !important;
+}
+
+#confetti rect:nth-child(4n-7) {
+  fill: #2a2f6a;
+}
+
+#confetti rect:nth-child(6n) {
+  fill: #fbba23;
+}
+
+@keyframes blast {
+  from {
+    opacity: 0;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  to {
+    transform: translateY(90px);
+  }
+}

src/assets/icons/floral.svg

@@ -35,7 +35,10 @@
     & span {
       display: inline;
       margin-inline: 0.5rem;
-      color: #f19292;
+      letter-spacing: 1px;
+      font-style: italic;
+      color: #4e0a0a;
+
     }
 
     .social {