From 066f66de5383c2f21d7e351e6105a114b488acb0 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 20 Mar 2026 11:38:34 +0000 Subject: [PATCH 1/3] Update src/app/page.tsx --- src/app/page.tsx | 212 +++++++++++++++++++++-------------------------- 1 file changed, 95 insertions(+), 117 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index 75330f1..a97e43c 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -12,143 +12,125 @@ 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"; +import { useEffect, useRef } 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" }; -// 3D Logo Animation Component -function Logo3DAnimation() { - const canvasRef = useRef(null); - const [isScrolling, setIsScrolling] = useState(false); - const logoOpacityRef = useRef(1); - const animationIdRef = useRef(); - const hasScrolledRef = useRef(false); +export default function LandingPage() { + const heroSectionRef = useRef(null); useEffect(() => { - const canvas = canvasRef.current; - if (!canvas) return; + // Create 3D logo animation on page load + const createLogoAnimation = () => { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + if (!ctx) return; - const ctx = canvas.getContext('2d'); - if (!ctx) return; + canvas.width = 200; + canvas.height = 200; + canvas.style.position = 'absolute'; + canvas.style.pointerEvents = 'none'; + canvas.id = 'logo-3d-canvas'; - // 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 + // 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'; + heroSectionRef.current.style.position = 'relative'; + heroSectionRef.current.appendChild(canvas); } - drawLogo(); - animationIdRef.current = requestAnimationFrame(animate); + let rotation = 0; + const animateLogo = () => { + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.save(); + ctx.translate(100, 100); + ctx.rotateX = rotation * 0.5; + ctx.rotateY = rotation; + ctx.rotateZ = rotation * 0.3; + + // Draw 3D cube representation + ctx.strokeStyle = 'rgba(168, 85, 247, 0.8)'; + ctx.lineWidth = 2; + ctx.globalAlpha = 0.8 + Math.sin(rotation * 0.02) * 0.2; + + // Draw rotating cube + const size = 60; + const angle = rotation * Math.PI / 180; + + // Front face + ctx.beginPath(); + ctx.moveTo(-size, -size); + ctx.lineTo(size, -size); + ctx.lineTo(size, size); + ctx.lineTo(-size, size); + ctx.closePath(); + ctx.stroke(); + + // Rotated back face + const x = Math.cos(angle) * size; + const y = Math.sin(angle) * size; + ctx.beginPath(); + ctx.moveTo(-size + x, -size + y); + ctx.lineTo(size + x, -size + y); + ctx.lineTo(size + x, size + y); + ctx.lineTo(-size + x, size + y); + ctx.closePath(); + ctx.stroke(); + + // Connecting lines + ctx.beginPath(); + ctx.moveTo(-size, -size); + ctx.lineTo(-size + x, -size + y); + ctx.moveTo(size, -size); + ctx.lineTo(size + x, -size + y); + ctx.moveTo(size, size); + ctx.lineTo(size + x, size + y); + ctx.moveTo(-size, size); + ctx.lineTo(-size + x, size + y); + ctx.stroke(); + + // Draw "W" text in center + ctx.font = 'bold 40px sans-serif'; + ctx.fillStyle = `rgba(168, 85, 247, ${0.6 + Math.sin(rotation * 0.02) * 0.4})`; + ctx.textAlign = 'center'; + ctx.textBaseline = 'middle'; + ctx.fillText('W', 0, 0); + + ctx.restore(); + rotation += 1.5; + requestAnimationFrame(animateLogo); + }; + + animateLogo(); }; + // Add scroll event listener for fade/transition const handleScroll = () => { - const currentScrollY = window.scrollY; + const logoCanvas = document.getElementById('logo-3d-canvas') as HTMLCanvasElement; + if (!logoCanvas || !heroSectionRef.current) return; - if (currentScrollY > lastScrollY && !hasTriggeredFade) { - hasScrolledRef.current = true; - hasTriggeredFade = true; + const heroRect = heroSectionRef.current.getBoundingClientRect(); + const scrollProgress = 1 - (heroRect.bottom / window.innerHeight); + + if (scrollProgress > 0) { + logoCanvas.style.opacity = Math.max(0, 1 - scrollProgress); + logoCanvas.style.transform = `translateY(${scrollProgress * 50}px) scale(${1 - scrollProgress * 0.3})`; } - - lastScrollY = currentScrollY; }; - // Start animation - animate(); - - // Add scroll listener + createLogoAnimation(); window.addEventListener('scroll', handleScroll); return () => { - if (animationIdRef.current) { - cancelAnimationFrame(animationIdRef.current); - } window.removeEventListener('scroll', handleScroll); }; }, []); - return ( -
- -
- ); -} - -Logo3DAnimation.displayName = 'Logo3DAnimation'; - -export default function LandingPage() { return ( -
-
- -
+
{}} />
-- 2.49.1 From 869f71f5a929571a8c752db1d0590e835cee2a1a Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 20 Mar 2026 11:39:20 +0000 Subject: [PATCH 2/3] Update src/app/page.tsx --- src/app/page.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index a97e43c..aebcca6 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -49,9 +49,9 @@ export default function LandingPage() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.save(); ctx.translate(100, 100); - ctx.rotateX = rotation * 0.5; - ctx.rotateY = rotation; - ctx.rotateZ = rotation * 0.3; + // Note: Canvas 2D context does not support 3D rotations + // Using 2D rotation instead + ctx.rotate(rotation * Math.PI / 180); // Draw 3D cube representation ctx.strokeStyle = 'rgba(168, 85, 247, 0.8)'; @@ -262,7 +262,7 @@ export default function LandingPage() { tag="Featured Work" tagIcon={Sparkles} tagAnimation="slide-up" - gridVariant="bento-grid" + gridVariant="three-columns-all-equal-width" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} -- 2.49.1 From abd5d2e6b7106da0e63b0c607b7c1a5258030d55 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 20 Mar 2026 11:40:13 +0000 Subject: [PATCH 3/3] Update src/app/page.tsx --- src/app/page.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index aebcca6..cffba36 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -204,23 +204,19 @@ export default function LandingPage() { useInvertedBackground={false} features={[ { - id: 1, - title: "Web Development", description: "Custom web applications with cutting-edge technology, responsive design, and lightning-fast performance optimized for conversions.", phoneOne: { imageSrc: assetMap["web-development-icon"] }, + id: "1", title: "Web Development", description: "Custom web applications with cutting-edge technology, responsive design, and lightning-fast performance optimized for conversions.", phoneOne: { imageSrc: assetMap["web-development-icon"] }, phoneTwo: { imageSrc: assetMap["project-1"] } }, { - id: 2, - title: "App Development", description: "Native and cross-platform mobile applications with intuitive interfaces, seamless user experience, and robust backend infrastructure.", phoneOne: { imageSrc: assetMap["app-development-icon"] }, + id: "2", title: "App Development", description: "Native and cross-platform mobile applications with intuitive interfaces, seamless user experience, and robust backend infrastructure.", phoneOne: { imageSrc: assetMap["app-development-icon"] }, phoneTwo: { imageSrc: assetMap["project-2"] } }, { - id: 3, - title: "Backend Systems", description: "Scalable server infrastructure, cloud solutions, and API development designed for enterprise-level performance and security.", phoneOne: { imageSrc: assetMap["backend-icon"] }, + id: "3", title: "Backend Systems", description: "Scalable server infrastructure, cloud solutions, and API development designed for enterprise-level performance and security.", phoneOne: { imageSrc: assetMap["backend-icon"] }, phoneTwo: { imageSrc: assetMap["project-3"] } }, { - id: 4, - title: "UI/UX Design", description: "User-centered design systems, interactive prototypes, and visual storytelling that elevates brand presence and engagement.", phoneOne: { imageSrc: assetMap["ui-ux-icon"] }, + id: "4", title: "UI/UX Design", description: "User-centered design systems, interactive prototypes, and visual storytelling that elevates brand presence and engagement.", phoneOne: { imageSrc: assetMap["ui-ux-icon"] }, phoneTwo: { imageSrc: assetMap["project-4"] } } ]} -- 2.49.1