From 28c3fd5041478f72917d60894d7c358e0ec97b53 Mon Sep 17 00:00:00 2001 From: Benjtalkshow Date: Sat, 27 Sep 2025 21:26:14 +0100 Subject: [PATCH 1/2] fix: fix hero svg --- components/landing-page/BackedBy.tsx | 126 +++++++++--------- components/landing-page/Banner.tsx | 2 +- components/landing-page/Hero.tsx | 64 +++++++-- .../landing-page/about/AboutUsDifferent.tsx | 28 +++- public/elipse1.svg | 18 +-- public/elipse2.svg | 18 +-- public/elipse3.svg | 18 +-- 7 files changed, 163 insertions(+), 111 deletions(-) diff --git a/components/landing-page/BackedBy.tsx b/components/landing-page/BackedBy.tsx index daef4dfc3..c47fd9304 100644 --- a/components/landing-page/BackedBy.tsx +++ b/components/landing-page/BackedBy.tsx @@ -101,7 +101,7 @@ const BackedBy = () => { }; useGSAP( - (context, contextSafe) => { + () => { if ( !containerRef.current || !column1Ref.current || @@ -110,82 +110,82 @@ const BackedBy = () => { ) return; - const container = containerRef.current; + // const container = containerRef.current; - const createSeamlessScrollAnimation = ( - element: HTMLElement, - direction: 'up' | 'down' = 'up' - ) => { - const children = Array.from(element.children); - const totalHeight = children.reduce((acc, child) => { - const rect = child.getBoundingClientRect(); - return acc + rect.height + 24; - }, 0); + // const createSeamlessScrollAnimation = ( + // element: HTMLElement, + // direction: 'up' | 'down' = 'up' + // ) => { + // const children = Array.from(element.children); + // const totalHeight = children.reduce((acc, child) => { + // const rect = child.getBoundingClientRect(); + // return acc + rect.height + 24; + // }, 0); - const wrapper = document.createElement('div'); - wrapper.style.position = 'relative'; + // const wrapper = document.createElement('div'); + // wrapper.style.position = 'relative'; - children.forEach(child => { - wrapper.appendChild(child); - }); + // children.forEach(child => { + // wrapper.appendChild(child); + // }); - const clone = wrapper.cloneNode(true) as HTMLElement; - wrapper.appendChild(clone); + // const clone = wrapper.cloneNode(true) as HTMLElement; + // wrapper.appendChild(clone); - element.innerHTML = ''; - element.appendChild(wrapper); + // element.innerHTML = ''; + // element.appendChild(wrapper); - const scrollDistance = direction === 'up' ? -totalHeight : totalHeight; + // const scrollDistance = direction === 'up' ? -totalHeight : totalHeight; - gsap.set(wrapper, { - y: 0, - force3D: true, - willChange: 'transform', - }); + // gsap.set(wrapper, { + // y: 0, + // force3D: true, + // willChange: 'transform', + // }); - const animation = gsap.to(wrapper, { - y: scrollDistance, - duration: 30, - ease: 'none', - repeat: -1, - force3D: true, - transformOrigin: 'center center', - immediateRender: false, - lazy: false, - }); + // const animation = gsap.to(wrapper, { + // y: scrollDistance, + // duration: 30, + // ease: 'none', + // repeat: -1, + // force3D: true, + // transformOrigin: 'center center', + // immediateRender: false, + // lazy: false, + // }); - return animation; - }; + // return animation; + // }; - const animations = [ - createSeamlessScrollAnimation(column1Ref.current, 'up'), - createSeamlessScrollAnimation(column2Ref.current, 'down'), - createSeamlessScrollAnimation(column3Ref.current, 'up'), - ]; + // const animations = [ + // createSeamlessScrollAnimation(column1Ref.current, 'up'), + // createSeamlessScrollAnimation(column2Ref.current, 'down'), + // createSeamlessScrollAnimation(column3Ref.current, 'up'), + // ]; - const handleMouseEnter = - contextSafe?.(() => { - animations.forEach(anim => anim.pause()); - }) || - (() => { - animations.forEach(anim => anim.pause()); - }); + // const handleMouseEnter = + // contextSafe?.(() => { + // animations.forEach(anim => anim.pause()); + // }) || + // (() => { + // animations.forEach(anim => anim.pause()); + // }); - const handleMouseLeave = - contextSafe?.(() => { - animations.forEach(anim => anim.resume()); - }) || - (() => { - animations.forEach(anim => anim.resume()); - }); + // const handleMouseLeave = + // contextSafe?.(() => { + // animations.forEach(anim => anim.resume()); + // }) || + // (() => { + // animations.forEach(anim => anim.resume()); + // }); - container.addEventListener('mouseenter', handleMouseEnter); - container.addEventListener('mouseleave', handleMouseLeave); + // container.addEventListener('mouseenter', handleMouseEnter); + // container.addEventListener('mouseleave', handleMouseLeave); - return () => { - container.removeEventListener('mouseenter', handleMouseEnter); - container.removeEventListener('mouseleave', handleMouseLeave); - }; + // return () => { + // container.removeEventListener('mouseenter', handleMouseEnter); + // container.removeEventListener('mouseleave', handleMouseLeave); + // }; }, { scope: containerRef, diff --git a/components/landing-page/Banner.tsx b/components/landing-page/Banner.tsx index 2e757b517..61506a13a 100644 --- a/components/landing-page/Banner.tsx +++ b/components/landing-page/Banner.tsx @@ -4,7 +4,7 @@ import Link from 'next/link'; const CleanBanner = () => { return ( -
+
diff --git a/components/landing-page/Hero.tsx b/components/landing-page/Hero.tsx index ee58554ff..0d6aefcc4 100644 --- a/components/landing-page/Hero.tsx +++ b/components/landing-page/Hero.tsx @@ -41,16 +41,31 @@ export default function Hero({ className = '' }: HeroProps) { const setupAnimations = useCallback(() => { if (!heroRef.current) return; - const ellipseImg = heroRef.current.querySelector('.ellipse-image'); + const ellipseImg = heroRef.current.querySelectorAll('.ellipse-image'); const sphereImg = heroRef.current.querySelector('.sphere-image'); if (ellipseImg) { - gsap.to(ellipseImg, { - ...animationConfig.ellipse, - willChange: 'transform', - force3D: true, - immediateRender: false, - lazy: true, + ellipseImg.forEach((img, i) => { + // Common scale animation + gsap.to(img, { + ...animationConfig.ellipse, + willChange: 'transform', + force3D: true, + immediateRender: false, + lazy: true, + }); + + // Rotation animation per ellipse + const direction = i === 0 || i === 1 ? 2 : -1; + gsap.to(img, { + rotation: direction * 360, + ease: 'none', + duration: 60, + repeat: -1, + transformOrigin: '50% 50%', + force3D: true, + willChange: 'transform', + }); }); } @@ -75,7 +90,29 @@ export default function Hero({ className = '' }: HeroProps) { }, { scope: heroRef, dependencies: [setupAnimations] } ); - + const ellipses = [ + { + src: '/elipse1.svg', + width: 'w-[50%]', + z: 'z-10', + opacity: '', + sizes: '50vw', + }, + { + src: '/elipse2.svg', + width: 'w-[65%]', + z: 'z-10', + opacity: '', + sizes: '90vw', + }, + { + src: '/elipse3.svg', + width: 'w-[80%]', + z: 'z-10', + opacity: '', + sizes: '100vw', + }, + ]; return (
*/} - {[1, 2, 3].map(elipse => ( + {ellipses.map((ellipse, i) => ( ))} -
(
+ +
-
+ +

- + + - - - + + + - - - - + + + + diff --git a/public/elipse2.svg b/public/elipse2.svg index 7f0326214..f737d99af 100644 --- a/public/elipse2.svg +++ b/public/elipse2.svg @@ -1,14 +1,14 @@ - - + + - - - + + + - - - - + + + + diff --git a/public/elipse3.svg b/public/elipse3.svg index c7939e4a2..2ddc42f5c 100644 --- a/public/elipse3.svg +++ b/public/elipse3.svg @@ -1,14 +1,14 @@ - - + + - - - + + + - - - - + + + + From a1521a5136e3380d977bb1ebc9447cc5f3641966 Mon Sep 17 00:00:00 2001 From: Benjtalkshow Date: Tue, 30 Sep 2025 16:29:48 +0100 Subject: [PATCH 2/2] fix: revert backed by component --- components/landing-page/BackedBy.tsx | 126 +++++++++++++-------------- 1 file changed, 63 insertions(+), 63 deletions(-) diff --git a/components/landing-page/BackedBy.tsx b/components/landing-page/BackedBy.tsx index c47fd9304..daef4dfc3 100644 --- a/components/landing-page/BackedBy.tsx +++ b/components/landing-page/BackedBy.tsx @@ -101,7 +101,7 @@ const BackedBy = () => { }; useGSAP( - () => { + (context, contextSafe) => { if ( !containerRef.current || !column1Ref.current || @@ -110,82 +110,82 @@ const BackedBy = () => { ) return; - // const container = containerRef.current; + const container = containerRef.current; - // const createSeamlessScrollAnimation = ( - // element: HTMLElement, - // direction: 'up' | 'down' = 'up' - // ) => { - // const children = Array.from(element.children); - // const totalHeight = children.reduce((acc, child) => { - // const rect = child.getBoundingClientRect(); - // return acc + rect.height + 24; - // }, 0); + const createSeamlessScrollAnimation = ( + element: HTMLElement, + direction: 'up' | 'down' = 'up' + ) => { + const children = Array.from(element.children); + const totalHeight = children.reduce((acc, child) => { + const rect = child.getBoundingClientRect(); + return acc + rect.height + 24; + }, 0); - // const wrapper = document.createElement('div'); - // wrapper.style.position = 'relative'; + const wrapper = document.createElement('div'); + wrapper.style.position = 'relative'; - // children.forEach(child => { - // wrapper.appendChild(child); - // }); + children.forEach(child => { + wrapper.appendChild(child); + }); - // const clone = wrapper.cloneNode(true) as HTMLElement; - // wrapper.appendChild(clone); + const clone = wrapper.cloneNode(true) as HTMLElement; + wrapper.appendChild(clone); - // element.innerHTML = ''; - // element.appendChild(wrapper); + element.innerHTML = ''; + element.appendChild(wrapper); - // const scrollDistance = direction === 'up' ? -totalHeight : totalHeight; + const scrollDistance = direction === 'up' ? -totalHeight : totalHeight; - // gsap.set(wrapper, { - // y: 0, - // force3D: true, - // willChange: 'transform', - // }); + gsap.set(wrapper, { + y: 0, + force3D: true, + willChange: 'transform', + }); - // const animation = gsap.to(wrapper, { - // y: scrollDistance, - // duration: 30, - // ease: 'none', - // repeat: -1, - // force3D: true, - // transformOrigin: 'center center', - // immediateRender: false, - // lazy: false, - // }); + const animation = gsap.to(wrapper, { + y: scrollDistance, + duration: 30, + ease: 'none', + repeat: -1, + force3D: true, + transformOrigin: 'center center', + immediateRender: false, + lazy: false, + }); - // return animation; - // }; + return animation; + }; - // const animations = [ - // createSeamlessScrollAnimation(column1Ref.current, 'up'), - // createSeamlessScrollAnimation(column2Ref.current, 'down'), - // createSeamlessScrollAnimation(column3Ref.current, 'up'), - // ]; + const animations = [ + createSeamlessScrollAnimation(column1Ref.current, 'up'), + createSeamlessScrollAnimation(column2Ref.current, 'down'), + createSeamlessScrollAnimation(column3Ref.current, 'up'), + ]; - // const handleMouseEnter = - // contextSafe?.(() => { - // animations.forEach(anim => anim.pause()); - // }) || - // (() => { - // animations.forEach(anim => anim.pause()); - // }); + const handleMouseEnter = + contextSafe?.(() => { + animations.forEach(anim => anim.pause()); + }) || + (() => { + animations.forEach(anim => anim.pause()); + }); - // const handleMouseLeave = - // contextSafe?.(() => { - // animations.forEach(anim => anim.resume()); - // }) || - // (() => { - // animations.forEach(anim => anim.resume()); - // }); + const handleMouseLeave = + contextSafe?.(() => { + animations.forEach(anim => anim.resume()); + }) || + (() => { + animations.forEach(anim => anim.resume()); + }); - // container.addEventListener('mouseenter', handleMouseEnter); - // container.addEventListener('mouseleave', handleMouseLeave); + container.addEventListener('mouseenter', handleMouseEnter); + container.addEventListener('mouseleave', handleMouseLeave); - // return () => { - // container.removeEventListener('mouseenter', handleMouseEnter); - // container.removeEventListener('mouseleave', handleMouseLeave); - // }; + return () => { + container.removeEventListener('mouseenter', handleMouseEnter); + container.removeEventListener('mouseleave', handleMouseLeave); + }; }, { scope: containerRef,