From 075ead8cb00378dfc720dbed9cdcb5a28a6a2bf1 Mon Sep 17 00:00:00 2001
From: bender <kudin.dima@gmail.com>
Date: Fri, 20 Mar 2026 11:34:41 +0000
Subject: [PATCH] Update src/app/page.tsx

---
 src/app/page.tsx | 132 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 132 insertions(+)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 39a4a7a..a281bd0 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,11 +12,140 @@ import SocialProofOne from "@/components/sections/socialProof/SocialProofOne";
 import ContactCTA from "@/components/sections/contact/ContactCTA";
 import FooterBaseCard from "@/components/sections/footer/FooterBaseCard";
 import { Globe, Sparkles, Star, TrendingUp, Zap } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import dynamic from "next/dynamic";
 
 const assetMap: { [key: string]: string } = {
   "hero-background": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/futuristic-dark-tech-interface-with-glow-1774004093812-920cc462.png",  "web-development-icon": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/sleek-web-development-service-icon-showi-1774004094297-7352618b.png",  "app-development-icon": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/modern-app-development-icon-featuring-mo-1774004093899-e690afb4.png",  "backend-icon": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/backend-systems-icon-showing-server-infr-1774004093199-58d41d92.png",  "ui-ux-icon": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/ui-ux-design-service-icon-showing-design-1774004093609-8ada2721.png",  "process-research": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/research-phase-visualization-showing-ana-1774004094736-ee54127c.png",  "process-design": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/design-phase-showing-creative-tools-desi-1774004094706-b0dd8bc0.png",  "process-development": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/development-phase-showing-code-editor-pr-1774004095177-e7a3c030.png",  "process-deployment": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/deployment-phase-showing-server-launch-c-1774004094786-5f0d70c9.png",  "project-1": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/modern-saas-platform-dashboard-interface-1774004094691-f6251ed7.png",  "project-2": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/e-commerce-mobile-app-showcase-displayin-1774004095131-3382a52f.png",  "project-3": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/enterprise-web-application-interface-sho-1774004095570-91c45e97.png",  "project-4": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/creative-agency-website-portfolio-showca-1774004094375-d5ce331b.png",  "project-5": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/fintech-application-interface-showing-fi-1774004094616-1dbef841.png",  "testimonial-1": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/professional-headshot-portrait-of-confid-1774004095247-fe915893.png",  "testimonial-2": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/professional-portrait-of-startup-founder-1774004094190-19835cc6.png",  "testimonial-3": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/professional-headshot-of-product-manager-1774004093853-6f95100b.png",  "testimonial-4": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/professional-headshot-of-marketing-direc-1774004093935-ac036d4d.png",  "testimonial-5": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/professional-portrait-of-design-director-1774004094343-5fbbeb53.png",  "testimonial-6": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/professional-headshot-of-cto-in-tech-com-1774004094471-8cc0c153.png",  "logo-microsoft": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/microsoft-corporation-logo-and-brand-ide-1774004094405-009eb6d1.png",  "logo-google": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/google-company-logo-and-brand-identity-r-1774004093023-768edcf8.png",  "logo-amazon": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/amazon-company-logo-and-brand-identity-m-1774004094754-94c07118.png",  "logo-apple": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/apple-inc-logo-and-brand-identity-premiu-1774004093554-e6c4c8cc.png",  "logo-netflix": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/netflix-company-logo-and-brand-identity--1774004095072-4dc6594f.png",  "logo-tesla": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/tesla-company-logo-and-brand-identity-mo-1774004094332-4603a3b9.png",  "logo-spotify": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/spotify-company-logo-and-brand-identity--1774004093062-9479bac3.png",  "logo-slack": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/slack-company-logo-and-brand-identity-co-1774004094070-0756b63c.png",  "logo-figma": "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BCrKYev1Scdtd3JNLxSqreAZwJ/figma-company-logo-and-brand-identity-de-1774004094523-ad3e5827.png"
 };
 
+// 3D Logo Animation Component
+function Logo3DAnimation() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const [isScrolling, setIsScrolling] = useState(false);
+  const logoOpacityRef = useRef(1);
+  const animationIdRef = useRef<number>();
+  const hasScrolledRef = useRef(false);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    // Set canvas size
+    canvas.width = 300;
+    canvas.height = 300;
+
+    let rotation = 0;
+    let lastScrollY = 0;
+    let hasTriggeredFade = false;
+
+    const drawLogo = () => {
+      const centerX = canvas.width / 2;
+      const centerY = canvas.height / 2;
+      const size = 80;
+
+      // Clear canvas
+      ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+      // Save context state
+      ctx.save();
+
+      // Move to center
+      ctx.translate(centerX, centerY);
+
+      // Apply 3D rotation effect with perspective
+      ctx.rotate(rotation);
+
+      // Create gradient for 3D effect
+      const gradient = ctx.createLinearGradient(-size, -size, size, size);
+      gradient.addColorStop(0, '#00d9ff');
+      gradient.addColorStop(0.5, '#0099cc');
+      gradient.addColorStop(1, '#006699');
+
+      // Draw main cube/knight shape
+      ctx.fillStyle = gradient;
+      ctx.globalAlpha = logoOpacityRef.current;
+
+      // Draw knight silhouette with 3D effect
+      ctx.beginPath();
+      // Knight head
+      ctx.arc(-20, -30, 25, 0, Math.PI * 2);
+      ctx.fill();
+
+      // Knight neck
+      ctx.fillRect(-15, -5, 30, 20);
+
+      // Knight body
+      ctx.beginPath();
+      ctx.ellipse(0, 30, 40, 50, 0, 0, Math.PI * 2);
+      ctx.fill();
+
+      // Knight base
+      ctx.fillRect(-45, 75, 90, 15);
+
+      // Add glow effect
+      ctx.globalAlpha = 0.3 * logoOpacityRef.current;
+      ctx.strokeStyle = '#00d9ff';
+      ctx.lineWidth = 3;
+      ctx.beginPath();
+      ctx.arc(0, 0, size + 20, 0, Math.PI * 2);
+      ctx.stroke();
+
+      // Restore context state
+      ctx.restore();
+    };
+
+    const animate = () => {
+      if (!hasScrolledRef.current) {
+        rotation += 0.015; // Smooth rotation on load
+      } else if (logoOpacityRef.current > 0) {
+        logoOpacityRef.current -= 0.02; // Fade out after scroll
+      }
+
+      drawLogo();
+      animationIdRef.current = requestAnimationFrame(animate);
+    };
+
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+
+      if (currentScrollY > lastScrollY && !hasTriggeredFade) {
+        hasScrolledRef.current = true;
+        hasTriggeredFade = true;
+      }
+
+      lastScrollY = currentScrollY;
+    };
+
+    // Start animation
+    animate();
+
+    // Add scroll listener
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      if (animationIdRef.current) {
+        cancelAnimationFrame(animationIdRef.current);
+      }
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  return (
+    <div className="flex justify-center items-center mb-8">
+      <canvas
+        ref={canvasRef}
+        className="w-[300px] h-[300px]"
+        aria-label="3D rotating Node Knight logo animation"
+      />
+    </div>
+  );
+}
+
 export default function LandingPage() {
   return (
     <ThemeProvider
@@ -45,6 +174,9 @@ export default function LandingPage() {
       </div>
 
       <div id="hero" data-section="hero">
+        <div className="flex flex-col items-center justify-center pt-20 pb-10">
+          <Logo3DAnimation />
+        </div>
         <HeroSplitTestimonial
           title="We Build Digital Experiences That Scale"
           description="Web. Apps. Systems. Built for Growth."
-- 
2.49.1