refactor: streamline landing page components and enhance accessibility

- Remove unnecessary state and effects from LandingPage component.
- Simplify the BackedBy component by integrating testimonials and improving image loading handling.
- Update Footer component to utilize social links from config and enhance accessibility features.
- Refactor Hero component to improve animation setup and accessibility attributes.
- Introduce LooperSVG component for enhanced visual effects in the Hero section.
- Update WhyBoundless and BlogSection components for better structure and loading states.
- Ensure all components are responsive and maintain consistent styling across the landing page.

Author: 0xdevcollins

app/(landing)/page.tsx

@@ -4,49 +4,19 @@ import { useGSAP } from '@gsap/react';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
 import { ScrollToPlugin } from 'gsap/ScrollToPlugin';
 import { ScrollSmoother } from 'gsap/ScrollSmoother';
-import { useEffect, useRef, useState } from 'react';
+import { useRef } from 'react';
 import BeamBackground from '@/components/landing-page/BeamBackground';
-import { Hero, Footer } from '@/components/landing-page';
+import { Hero } from '@/components/landing-page';
 import HowBoundlessWork from '@/components/landing-page/HowBoundlessWork';
 import WhyBoundless from '@/components/landing-page/WhyBoundless';
 import BackedBy from '@/components/landing-page/BackedBy';
 import NewsLetter from '@/components/landing-page/NewsLetter';
 import BlogSection from '@/components/landing-page/blog/BlogSection';
-import { useRouter } from 'next/navigation';
-import { useIsMobile } from '@/hooks/use-mobile';
-import LoadingSpinner from '@/components/LoadingSpinner';
+import { Footer } from '@/components/landing-page/footer';
 
 export default function LandingPage() {
   const containerRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<HTMLDivElement>(null);
-  const router = useRouter();
-  const isMobile = useIsMobile();
-  const [hasRedirected, setHasRedirected] = useState(false);
-
-  useEffect(() => {
-    const delay = isMobile ? 1000 : 500;
-
-    const redirectTimer = setTimeout(() => {
-      if (!hasRedirected) {
-        setHasRedirected(true);
-        router.push('/waitlist');
-      }
-    }, delay);
-
-    return () => clearTimeout(redirectTimer);
-  }, [router, isMobile, hasRedirected]);
-
-  useEffect(() => {
-    if (hasRedirected) {
-      const fallbackTimer = setTimeout(() => {
-        if (window.location.pathname === '/') {
-          window.location.href = '/waitlist';
-        }
-      }, 2000);
-
-      return () => clearTimeout(fallbackTimer);
-    }
-  }, [hasRedirected]);
 
   gsap.registerPlugin(ScrollTrigger, ScrollSmoother, ScrollToPlugin);
 
@@ -59,72 +29,10 @@ export default function LandingPage() {
         smoothTouch: 0.1,
         effects: true,
       });
-
-      ScrollTrigger.create({
-        trigger: '#hero',
-        start: 'top top',
-        endTrigger: '#how-boundless-work',
-        end: 'top top',
-        pin: true,
-        scrub: 1,
-        snap: {
-          snapTo: value => {
-            return value < 0.5 ? 0 : 1;
-          },
-          duration: { min: 0.2, max: 1 },
-          delay: 0.1,
-          ease: 'power1.inOut',
-        },
-      });
-      const handleWheel = (e: WheelEvent) => {
-        const hero = document.getElementById('hero');
-        const how = document.getElementById('how-boundless-work');
-        if (!hero || !how) return;
-
-        const heroRect = hero.getBoundingClientRect();
-        if (heroRect.bottom - 10 <= window.innerHeight && e.deltaY > 0) {
-          e.preventDefault();
-          gsap.to(window, {
-            duration: 0.8,
-            scrollTo: { y: how, offsetY: 0 },
-            ease: 'power2.inOut',
-          });
-        }
-      };
-
-      setTimeout(() => {
-        const hero = document.getElementById('hero');
-        if (hero) {
-          hero.addEventListener('wheel', handleWheel, { passive: false });
-        }
-      }, 0);
-
-      ScrollTrigger.addEventListener('refreshInit', () => {
-        const hero = document.getElementById('hero');
-        if (hero) {
-          hero.removeEventListener('wheel', handleWheel);
-          hero.addEventListener('wheel', handleWheel, { passive: false });
-        }
-      });
-
-      return () => {
-        ScrollTrigger.getAll().forEach(trigger => trigger.kill());
-      };
     },
     { scope: containerRef }
   );
 
-  if (hasRedirected) {
-    return (
-      <div className='flex min-h-screen items-center justify-center bg-black'>
-        <div className='text-center'>
-          <LoadingSpinner />
-          <p className='text-lg text-white'>Redirecting to waitlist...</p>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div ref={containerRef} className='relative overflow-hidden'>
       <BeamBackground />