performance optimization

website/app/globals.css

@@ -31,7 +31,7 @@ body {
 }
 
 .react-grid-sample2 {
-  background: linear-gradient(to bottom, #ffffff 80%, transparent 80%),  url(../public/static/bg-texture-2.png);
+  background: linear-gradient(to bottom, #ffffff 80%, transparent 80%),  url(../public/static/noise-texture-2.webp);
 }
 
 /* override daisyui theme */
@@ -67,11 +67,11 @@ body {
 }
 
 .texture-bg {
-  background-image: url(../public/static/bg-texture.png);
+  background-image: url(../public/static/noise-texture-1.webp);
 }
 
 .texture-bg-2 {
-  background-image: url(../public/static/bg-texture-2.png);
+  background-image: url(../public/static/noise-texture-2.webp);
 }
 
 .LiveCode input[type="date"]::-webkit-calendar-picker-indicator {

website/app/support/page.tsx

@@ -9,12 +9,12 @@ export default function FeaturesPage() {
     <div className="z-1">
       <>
         <div
-          className={`absolute z-0 w-[50%] top-[50px] left-[-20%] hidden lg:block`}
+          className={`absolute z-0 w-[100%] top-[-10%] left-[-50%] hidden lg:block`}
         >
           <Shape1 />
         </div>
         <div
-          className={`absolute z-0 w-[50%] top-[200px] right-[-20%] hidden lg:block`}
+          className={`absolute z-0 w-[100%] top-[0%] right-[-35%] hidden lg:block`}
         >
           <Shape2 />
         </div>
@@ -32,7 +32,7 @@ export default function FeaturesPage() {
         </div>
         <div className="grid grid-cols-main md:pb-[250px] pt-8 md:pt-0">
           <div className="col-start-1 col-end-13 sm:col-start-2 sm:col-end-12 xl:col-start-3 xl:col-end-11 text-black-secondary flex gap-x-4 2xl:gap-x-16 mb-[128px] justify-center flex-col md:flex-row px-4">
-            <div className="flex-1 flex flex-col items-center justify-start bg-[white] border p-4">
+            <div className="flex-1 flex flex-col items-center justify-start bg-[#ffffff3d] border p-4">
               <MdQuestionMark size={120} color="#107c41" />
               <h3 className="text-center font-bold">Got questions?</h3>
               <p className="mt-4 text-center">
@@ -47,7 +47,7 @@ export default function FeaturesPage() {
                 page
               </p>
             </div>
-            <div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0 bg-[white] border p-4 mt-8 md:mt-0">
+            <div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0 bg-[#ffffff3d] border p-4 mt-8 md:mt-0">
               <MdPerson size={120} color="#107c41" />
               <h3 className="text-center font-bold">
                 Need talented developers?
@@ -57,7 +57,7 @@ export default function FeaturesPage() {
                 your product.
               </p>
             </div>
-            <div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0 bg-[white] border p-4 mt-8 md:mt-0">
+            <div className="flex-1 flex flex-col items-center justify-start pt-8 md:pt-0 bg-[#ffffff3d] border p-4 mt-8 md:mt-0">
               <MdOutlineBugReport size={120} color="#107c41" />
               <h3 className="text-center font-bold">Technical issues?</h3>
               <p className="mt-4 text-center">

website/components/bg-shapes.tsx

@@ -1,18 +1,36 @@
 "use client";
 
+import { easeInOut, interpolatePaths } from "@/lib/path-interpolation";
 import { useEffect } from "react";
-import KUTE from "kute.js";
 
 const Shape1 = () => {
   useEffect(() => {
-    const tween1 = KUTE.fromTo(
-      "#s1-blob1",
-      { path: "#s1-blob1" },
-      { path: "#s1-blob2" },
-      { duration: 3500, yoyo: true, repeat: 100 }
-    );
-
-    tween1.start();
+    const blob1 = document.getElementById("s1-blob1");
+    const path1 = blob1?.getAttribute("d");
+    const path2 = document.getElementById("s1-blob2")?.getAttribute("d");
+
+    let startTime: number;
+    const duration = 11000;
+
+    const animateBlob = (timestamp: number) => {
+      if (!startTime) startTime = timestamp;
+      const elapsed = timestamp - startTime;
+      const progress = (elapsed % duration) / duration; // Normalized progress (0 to 1)
+      const easedProgress = easeInOut(progress);
+
+      if (!blob1 || !path1 || !path2) return;
+
+      const currentPath = interpolatePaths(
+        path1,
+        path2,
+        Math.abs(Math.sin(easedProgress * Math.PI))
+      );
+      blob1?.setAttribute("d", currentPath);
+
+      requestAnimationFrame(animateBlob);
+    };
+
+    requestAnimationFrame(animateBlob);
   }, []);
 
   return (
@@ -45,14 +63,32 @@ const Shape1 = () => {
 
 const Shape2 = () => {
   useEffect(() => {
-    const tween1 = KUTE.fromTo(
-      "#s2-blob1",
-      { path: "#s2-blob1" },
-      { path: "#s2-blob2" },
-      { duration: 3500, yoyo: true, repeat: 100 }
-    );
-
-    tween1.start();
+    const blob1 = document.getElementById("s2-blob1");
+    const path1 = blob1?.getAttribute("d");
+    const path2 = document.getElementById("s2-blob2")?.getAttribute("d");
+
+    let startTime: number;
+    const duration = 11000;
+
+    const animateBlob = (timestamp: number) => {
+      if (!startTime) startTime = timestamp;
+      const elapsed = timestamp - startTime;
+      const progress = (elapsed % duration) / duration; // Normalized progress (0 to 1)
+      const easedProgress = easeInOut(progress);
+
+      if (!blob1 || !path1 || !path2) return;
+
+      const currentPath = interpolatePaths(
+        path1,
+        path2,
+        Math.abs(Math.sin(easedProgress * Math.PI))
+      );
+      blob1?.setAttribute("d", currentPath);
+
+      requestAnimationFrame(animateBlob);
+    };
+
+    requestAnimationFrame(animateBlob);
   }, []);
 
   return (

website/components/footer.tsx

@@ -67,7 +67,7 @@ export const Footer = () => {
           </ul>
         </div>
       </div>
-      <div className="col-start-3 col-end-11 text-center text-zinc-600">
+      <div className="col-start-3 col-end-11 text-center text-zinc-700">
         © Silevis Software Sp. z o.o. 2019-{new Date().getFullYear()}
       </div>
     </footer>

website/components/google-analytics.tsx

@@ -5,7 +5,7 @@ import Script from "next/script";
 export default function GoogleAnalytics() {
   return (
     <>
-      {/* <Script
+      <Script
         type="text/plain"
         data-category="analytics"
         src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_MEASUREMENT_ID}`}
@@ -20,7 +20,7 @@ export default function GoogleAnalytics() {
               page_path: window.location.pathname,
               });
           `}
-      </Script> */}
+      </Script>
     </>
   );
 }

website/lib/path-interpolation.ts

@@ -0,0 +1,29 @@
+// Ease-in-out function
+const easeInOut = (t: number) => {
+  return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+};
+
+// Utility function to interpolate between two paths
+const interpolatePaths = (path1: string, path2: string, t: number): string => {
+  const interpolateNumbers = (n1: number, n2: number, t: number) =>
+    n1 + (n2 - n1) * t;
+
+  const path1Data = path1.match(/[-+]?[0-9]*\.?[0-9]+/g)?.map(Number) || [];
+  const path2Data = path2.match(/[-+]?[0-9]*\.?[0-9]+/g)?.map(Number) || [];
+
+  if (path1Data.length !== path2Data.length) {
+    console.warn(
+      "Paths must have the same number of points for smooth interpolation."
+    );
+    return path1; // fallback to avoid error
+  }
+
+  const interpolatedData = path1Data.map((point, index) =>
+    interpolateNumbers(point, path2Data[index], t)
+  );
+  return path1.replace(/[-+]?[0-9]*\.?[0-9]+/g, () =>
+    interpolatedData.shift()!.toString()
+  );
+};
+
+export { easeInOut, interpolatePaths };

website/package.json

@@ -18,7 +18,6 @@
     "clsx": "^2.1.1",
     "framer-motion": "^11.11.1",
     "hamburger-react": "^2.5.0",
-    "kute.js": "^2.2.4",
     "lucide-react": "^0.446.0",
     "moment": "^2.30.1",
     "next": "14.2.5",