fix

app/lib/CounterUpCom.js

@@ -0,0 +1,22 @@
+import React, { useEffect, useState } from 'react';
+import CountUp from 'react-countup';
+
+function CounterUpCom({ endValue = 0, sectionSelect }) {
+    const [showCount, setShowCountValue] = useState(false);
+    useEffect(() => {
+        const rec = document.getElementById(sectionSelect);
+        if (rec) {
+            const currentPosition = rec.offsetTop - document.body.scrollTop;
+            window.addEventListener('scroll', () => {
+                const currentScrollPosition =
+                    window.pageYOffset || document.documentElement.scrollTop;
+                if (currentScrollPosition + 500 > currentPosition) {
+                    setShowCountValue(true);
+                }
+            });
+        }
+    }, [sectionSelect, showCount]);
+    return <>{showCount ? <CountUp delay={0} duration={3} end={endValue} /> : 0}</>;
+}
+
+export default CounterUpCom;

app/lib/LazyImage.js

@@ -0,0 +1,52 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+/**
+ * Renders an image lazily using the Intersection Observer API.
+ * The image is initially hidden and becomes visible once it enters the viewport.
+ * This approach improves performance by only loading images that are actually visible to the user.
+ * 
+ * @returns {JSX.Element} - The lazy image component.
+ */
+function LazyImage({ src, alt }) {
+  const imgRef = useRef();
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const [entry] = entries;
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.unobserve(imgRef.current); // Stop observing once the image is in the viewport
+        }
+      },
+      {
+        root: null, // Viewport
+        rootMargin: '0px', // No margin
+        threshold: 0.1, // Percentage of the image that needs to be visible
+      }
+    );
+
+    if (imgRef.current) {
+      observer.observe(imgRef.current);
+    }
+
+    return () => {
+      if (imgRef.current) {
+        observer.unobserve(imgRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <img
+      ref={imgRef}
+      src={isVisible ? src : ''}
+      alt={alt}
+      loading="lazy"
+      className={isVisible ? 'visible' : 'hidden'} // You can apply CSS classes for animations
+    />
+  );
+}
+
+export default LazyImage;

app/lib/SkeletonLoaders.js

@@ -0,0 +1,14 @@
+import "../assets/css/skeleton-loader.css"
+
+/**
+ * Renders a placeholder `<div>` element with the class name "image-skeleton-loader".
+ * This component is typically used as a placeholder for an image while it is being loaded.
+ * The CSS class "image-skeleton-loader or blog-text-skeleton-loader" can be used to style the placeholder element.
+ *
+ * @returns {React.Element} The rendered `<div>` element with the class name "image-skeleton-loader and blog-text-skeleton-loader".
+ */
+export const ImageLoader = () => <div className="image-skeleton-loader" />;
+
+export const BlogLoader = () => <div className="blog-text-skeleton-loader" />
+
+ 

app/lib/StickyMenu.js

@@ -0,0 +1,12 @@
+export default function StickyMenu(selector = '.appie-sticky') {
+    document.addEventListener('scroll', () => {
+        const element = document.querySelector(selector);
+        if (element) {
+            if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
+                element.classList.add('sticky');
+            } else {
+                element.classList.remove('sticky');
+            }
+        }
+    });
+}

app/lib/TopToBottom.js

@@ -0,0 +1,15 @@
+export default function TopToBottom(value) {
+    const result = document.querySelector(value);
+    if (result) {
+        document.addEventListener('scroll', () => {
+            if (
+                document.body.scrollTop > window.innerHeight ||
+                document.documentElement.scrollTop > window.innerHeight
+            ) {
+                result.style.display = 'block';
+            } else {
+                result.style.display = 'none';
+            }
+        });
+    }
+}

app/lib/localImgLoad.js

@@ -0,0 +1,2 @@
+const localImgLoad = (location) => require(`../assets/${location}`);
+export default localImgLoad