From 1ec585e0b575c21b5e47c9a358d8d8c0689bac1d Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 20 Mar 2026 11:43:16 +0000 Subject: [PATCH] Update src/app/page.tsx --- src/app/page.tsx | 38 ++++++++++++++++++++++++++------------ 1 file changed, 26 insertions(+), 12 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 0f8894b..adf1e1d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -12,7 +12,7 @@ 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 } from "react"; +import { useEffect, useRef, useState } from "react"; 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" @@ -20,6 +20,9 @@ const assetMap: { [key: string]: string } = { export default function LandingPage() { const heroSectionRef = useRef(null); + const canvasRef = useRef(null); + const animationFrameRef = useRef(null); + const [logoOpacity, setLogoOpacity] = useState(1); useEffect(() => { // Create 3D logo animation on page load @@ -36,12 +39,13 @@ export default function LandingPage() { // Get hero section and position canvas if (heroSectionRef.current) { - const heroRect = heroSectionRef.current.getBoundingClientRect(); canvas.style.left = `calc(50% - 100px)`; canvas.style.top = `50px`; canvas.style.zIndex = '10'; + canvas.style.transition = 'opacity 0.3s ease, transform 0.3s ease'; heroSectionRef.current.style.position = 'relative'; heroSectionRef.current.appendChild(canvas); + canvasRef.current = canvas; } let rotation = 0; @@ -49,8 +53,6 @@ export default function LandingPage() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(100, 100); - // Note: Canvas 2D context does not support 3D rotations - // Using 2D rotation instead ctx.rotate(rotation * Math.PI / 180); // Draw 3D cube representation @@ -103,7 +105,7 @@ export default function LandingPage() { ctx.restore(); rotation += 1.5; - requestAnimationFrame(animateLogo); + animationFrameRef.current = requestAnimationFrame(animateLogo); }; animateLogo(); @@ -111,23 +113,35 @@ export default function LandingPage() { // Add scroll event listener for fade/transition const handleScroll = () => { - const logoCanvas = document.getElementById('logo-3d-canvas') as HTMLCanvasElement; + const logoCanvas = canvasRef.current || document.getElementById('logo-3d-canvas') as HTMLCanvasElement; if (!logoCanvas || !heroSectionRef.current) return; const heroRect = heroSectionRef.current.getBoundingClientRect(); const scrollProgress = 1 - (heroRect.bottom / window.innerHeight); if (scrollProgress > 0) { - logoCanvas.style.opacity = Math.max(0, 1 - scrollProgress); + const newOpacity = Math.max(0, 1 - scrollProgress); + setLogoOpacity(newOpacity); + logoCanvas.style.opacity = `${newOpacity}`; logoCanvas.style.transform = `translateY(${scrollProgress * 50}px) scale(${1 - scrollProgress * 0.3})`; + } else { + setLogoOpacity(1); + logoCanvas.style.opacity = '1'; + logoCanvas.style.transform = 'translateY(0) scale(1)'; } }; createLogoAnimation(); - window.addEventListener('scroll', handleScroll); + window.addEventListener('scroll', handleScroll, { passive: true }); return () => { window.removeEventListener('scroll', handleScroll); + if (animationFrameRef.current !== null) { + cancelAnimationFrame(animationFrameRef.current); + } + if (canvasRef.current && canvasRef.current.parentNode) { + canvasRef.current.parentNode.removeChild(canvasRef.current); + } }; }, []); @@ -299,16 +313,16 @@ export default function LandingPage() { useInvertedBackground={false} metrics={[ { - id: "clients", value: 150, title: "Happy Clients", description: "Global brands and ambitious startups trust our expertise", imageSrc: assetMap["logo-microsoft"] + id: "clients", value: "150", title: "Happy Clients", description: "Global brands and ambitious startups trust our expertise", imageSrc: assetMap["logo-microsoft"] }, { - id: "projects", value: 300, title: "Projects Delivered", description: "From concept to launch, we've built extraordinary solutions", imageSrc: assetMap["logo-google"] + id: "projects", value: "300", title: "Projects Delivered", description: "From concept to launch, we've built extraordinary solutions", imageSrc: assetMap["logo-google"] }, { - id: "success", value: 98, title: "Success Rate", description: "Consistent delivery of results that exceed expectations", imageSrc: assetMap["logo-amazon"] + id: "success", value: "98", title: "Success Rate", description: "Consistent delivery of results that exceed expectations", imageSrc: assetMap["logo-amazon"] }, { - id: "team", value: 50, title: "Expert Team", description: "Top designers, developers, and strategists", imageSrc: assetMap["logo-apple"] + id: "team", value: "50", title: "Expert Team", description: "Top designers, developers, and strategists", imageSrc: assetMap["logo-apple"] } ]} /> -- 2.49.1