Fix landing

components/landing-page/Banner.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 
 const CleanBanner = () => {
   return (
-    <div className='px-10 md:px-30'>
+    <div className='mb-20 px-10 md:px-30'>
       <section className='relative mx-auto min-h-[18rem] max-w-6xl overflow-hidden rounded-[3.2rem]'>
         <div className='absolute inset-0'>
           <CleanBannerBg />

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 (
     <header
       className={`relative mx-5 flex h-screen min-h-screen items-stretch justify-between pb-9 md:items-end md:pb-[66px] ${className}`}
@@ -99,20 +136,19 @@ export default function Hero({ className = '' }: HeroProps) {
           quality={85}
           sizes='100vw'
         /> */}
-        {[1, 2, 3].map(elipse => (
+        {ellipses.map((ellipse, i) => (
           <Image
-            key={`elipse${elipse}`}
-            src={`/elipse${elipse}.svg`}
+            key={i}
+            src={ellipse.src}
             alt=''
-            className={`ellipse-image absolute top-1/2 left-1/2 z-10 h-[90%] ${elipse === 1 ? 'w-[70%]' : elipse === 2 ? 'w-[90%]' : 'w-[1500px]'} -translate-x-1/2 -translate-y-1/2`}
+            className={`ellipse-image absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 ${ellipse.width} ${ellipse.z} ${ellipse.opacity}`}
             width={1920}
             height={1080}
             priority
             quality={85}
-            sizes='90vw'
+            sizes={ellipse.sizes}
           />
         ))}
-
         <div
           className='absolute bottom-0 left-0 z-10 h-[150px] w-screen max-w-screen bg-gradient-to-t from-transparent'
           style={{

components/landing-page/about/AboutUsDifferent.tsx

@@ -125,7 +125,24 @@ function AboutUsDifferent({ className = '' }: AboutUsDifferentProps) {
             aria-labelledby={`${feature.id}-title`}
           >
             <div
-              className='flex h-[200px] w-full flex-shrink-0 items-center justify-center md:h-[240px]'
+              className="pointer-events-none absolute inset-0 bg-[url('/card-bg.svg')] bg-center bg-no-repeat"
+              style={{
+                opacity: 0.05,
+                WebkitMaskImage:
+                  'radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%)',
+                WebkitMaskRepeat: 'no-repeat',
+                WebkitMaskPosition: 'center',
+                WebkitMaskSize: 'cover',
+                maskImage:
+                  'radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 70%)',
+                maskRepeat: 'no-repeat',
+                maskPosition: 'center',
+                maskSize: 'cover',
+              }}
+            />
+
+            <div
+              className='relative flex h-[200px] w-full flex-shrink-0 items-center justify-center md:h-[240px]'
               style={{ maxWidth: `${feature.image.width}px` }}
             >
               <Image
@@ -138,7 +155,8 @@ function AboutUsDifferent({ className = '' }: AboutUsDifferentProps) {
                 quality={90}
               />
             </div>
-            <div className='flex flex-grow flex-col gap-2 px-4 py-4 md:gap-2.5 md:px-8 md:py-6'>
+
+            <div className='relative flex flex-grow flex-col gap-2 px-4 py-4 md:gap-2.5 md:px-8 md:py-6'>
               <h3
                 id={`${feature.id}-title`}
                 className='text-base font-semibold text-white md:text-lg'

components/landing-page/footer.tsx

@@ -28,6 +28,7 @@ export function Footer() {
               Web3-Native Funding.
             </p>
           </div>
+
           <div className='flex flex-col items-end space-y-6'>
             <nav
               className='mb-14 grid grid-cols-2 gap-x-8 gap-y-4 text-center sm:text-left'
@@ -58,6 +59,7 @@ export function Footer() {
                 Disclaimer
               </Link>
             </nav>
+
             <nav
               className='flex items-center space-x-4'
               aria-label='Social media links'
@@ -69,14 +71,14 @@ export function Footer() {
                     className='rounded transition-opacity hover:opacity-80 focus:ring-2 focus:ring-white/50 focus:outline-none'
                     target='_blank'
                     rel='noopener noreferrer'
-                    aria-label={Follow us on ${name}}
+                    aria-label={`Follow us on ${name}`}
                   >
                     <Image
-                      src={/footer/${name}.svg}
-                      alt={${name} icon}
+                      src={`/footer/${name}.svg`}
+                      alt={`${name} icon`}
                       width={24}
                       height={24}
-                      className='h-6 w-6'
+                      className={`${name === 'gmail' ? 'h-18 w-18' : 'h-6 w-6'}`}
                     />
                   </Link>
                   {index < Object.keys(socialLinks).length - 1 && (
@@ -87,24 +89,11 @@ export function Footer() {
                   )}
                 </div>
               ))}
-              <div className='ml-4 h-6 w-0.5 bg-[#2B2B2B]' aria-hidden='true' />
-              <Link
-                href={mailto:${socialLinks.gmail}}
-                className='rounded transition-opacity hover:opacity-80 focus:ring-2 focus:ring-white/50 focus:outline-none'
-                aria-label='Contact us via email'
-              >
-                <Image
-                  src='/footer/gmail.svg'
-                  alt='Email contact'
-                  width={24}
-                  height={24}
-                  className='h-21 w-20'
-                />
-              </Link>
             </nav>
           </div>
         </div>
 
+        {/* Mobile version */}
         <div className='flex flex-col items-center space-y-6 md:hidden'>
           <Link href='/' aria-label='Boundless homepage'>
             <Image
@@ -158,11 +147,11 @@ export function Footer() {
                   className='rounded transition-opacity hover:opacity-80 focus:ring-2 focus:ring-white/50 focus:outline-none'
                   target='_blank'
                   rel='noopener noreferrer'
-                  aria-label={Follow us on ${name}}
+                  aria-label={`Follow us on ${name}`}
                 >
                   <Image
-                    src={/footer/${name}.svg}
-                    alt={${name} icon}
+                    src={`/footer/${name}.svg`}
+                    alt={`${name} icon`}
                     width={24}
                     height={24}
                     className='h-6 w-6'
@@ -187,4 +176,4 @@ export function Footer() {
       </div>
     </footer>
   );
-}
+}

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/',
   },
-];
+];