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) => ( ))} -
+ +
-
+ +

+
+
))} -
+ {/* Mobile version */}
{${name} ); -} \ No newline at end of file +} diff --git a/lib/config.ts b/lib/config.ts index 156f0caa4..d25ff6183 100644 --- a/lib/config.ts +++ b/lib/config.ts @@ -8,6 +8,7 @@ export const socialLinks = { github: 'https://github.com/boundlessfi', discord: 'https://discord.gg/boundlessfi', telegram: 'https://t.me/boundlessfi', + gmail: 'mailto:admin@boundlessfi.xyz', }; export const ProfileSocialLinks = { discord: 'https://discord.gg/boundlessfi', @@ -38,4 +39,4 @@ export const backedBy = [ image: '/trustless.svg', url: 'https://www.trustlesswork.com/', }, -]; \ No newline at end of file +]; diff --git a/public/elipse1.svg b/public/elipse1.svg index a769a99b1..7ce490981 100644 --- a/public/elipse1.svg +++ b/public/elipse1.svg @@ -1,14 +1,14 @@ - - + + - - - + + + - - - - + + + + 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 @@ - - + + - - - + + + - - - - + + + +