Feat/new landing page

src/app/page.tsx

@@ -5,12 +5,13 @@ import {
     BusinessIntegrate,
     FAQs,
     Hero,
-    Marquee,
     NoFees,
     SecurityBuiltIn,
     SendInSeconds,
     YourMoney,
 } from '@/components/LandingPage'
+import { MarqueeComp } from '@/components/Global/MarqueeWrapper'
+import { HandThumbsUp } from '@/assets'
 import { useFooterVisibility } from '@/context/footerVisibility'
 import { useEffect, useState, useRef } from 'react'
 
@@ -30,7 +31,6 @@ export default function LandingPage() {
     const hero = {
         heading: 'Peanut',
         marquee: {
-            visible: true,
             message: ['No fees', 'Instant', '24/7', 'USD', 'EUR', 'CRYPTO', 'GLOBAL', 'SELF-CUSTODIAL'],
         },
         primaryCta: {
@@ -158,7 +158,11 @@ export default function LandingPage() {
         }
     }, [isScrollFrozen, animationComplete, shrinkingPhase, hasGrown])
 
-    const marqueeProps = { visible: hero.marquee.visible, message: hero.marquee.message }
+    const marqueeProps = {
+        message: hero.marquee.message,
+        imageSrc: HandThumbsUp.src,
+        backgroundColor: 'bg-secondary-1',
+    }
 
     return (
         <Layout className="!m-0 w-full !p-0">
@@ -168,21 +172,35 @@ export default function LandingPage() {
                 buttonVisible={buttonVisible}
                 buttonScale={buttonScale}
             />
-            <Marquee {...marqueeProps} />
+            <div className="relative z-1">
+                <MarqueeComp {...marqueeProps} />
+            </div>
             <YourMoney />
-            <Marquee {...marqueeProps} />
+            <div className="relative z-1">
+                <MarqueeComp {...marqueeProps} />
+            </div>
             <NoFees />
-            <Marquee {...marqueeProps} />
+            <div className="relative z-1">
+                <MarqueeComp {...marqueeProps} />
+            </div>
             <SecurityBuiltIn />
-            <Marquee {...marqueeProps} />
+            <div className="relative z-1">
+                <MarqueeComp {...marqueeProps} />
+            </div>
             <FAQs heading={faqs.heading} questions={faqs.questions} marquee={faqs.marquee} />
-            <Marquee {...marqueeProps} />
+            <div className="relative z-1">
+                <MarqueeComp {...marqueeProps} />
+            </div>
             <div ref={sendInSecondsRef}>
                 <SendInSeconds />
             </div>
-            <Marquee {...marqueeProps} />
+            <div className="relative z-1">
+                <MarqueeComp {...marqueeProps} />
+            </div>
             <BusinessIntegrate />
-            <Marquee {...marqueeProps} />
+            <div className="relative z-1">
+                <MarqueeComp {...marqueeProps} />
+            </div>
         </Layout>
     )
 }

src/components/LandingPage/businessIntegrate.tsx

@@ -4,15 +4,9 @@ import { Star } from '@/assets'
 import scribble from '@/assets/scribble.svg'
 import peanutMeans from '@/assets/illustrations/peanut-means.svg'
 
-// Define the background color as a constant
-const businessBgColor = '#90A8ED'
-
 export function BusinessIntegrate() {
     return (
-        <section
-            className="relative min-h-[500px] overflow-hidden px-4 py-16 text-n-1 md:min-h-[900px]"
-            style={{ backgroundColor: businessBgColor }}
-        >
+        <section className="relative min-h-[500px] overflow-hidden bg-secondary-3 px-4 py-16 text-n-1 md:min-h-[900px]">
             <div className="relative mx-auto max-w-3xl text-center">
                 {/* Main heading */}
                 <div className="mb-8 mt-8 md:mb-24 md:mt-20">

src/components/LandingPage/hero.tsx

@@ -1,11 +1,11 @@
 import { ButterySmoothGlobalMoney, PeanutGuyGIF, Sparkle } from '@/assets'
 import { Stack } from '@chakra-ui/react'
 import { motion } from 'framer-motion'
-import { useEffect, useState } from 'react'
 import { twMerge } from 'tailwind-merge'
 import { CloudImages, HeroImages } from './imageAssets'
 import Image from 'next/image'
 import instantlySendReceive from '@/assets/illustrations/instantly-send-receive.svg'
+import { useResizeHandler, useScrollHandler, createButtonAnimation } from '@/hooks/useAnimations'
 
 type CTAButton = {
     label: string
@@ -22,29 +22,6 @@ type HeroProps = {
 }
 
 // Helper functions moved outside component for better performance
-const getInitialAnimation = (variant: 'primary' | 'secondary') => ({
-    opacity: 0,
-    translateY: 4,
-    translateX: variant === 'primary' ? 0 : 4,
-    rotate: 0.75,
-})
-
-const getAnimateAnimation = (variant: 'primary' | 'secondary', buttonVisible?: boolean, buttonScale?: number) => ({
-    opacity: buttonVisible ? 1 : 0,
-    translateY: buttonVisible ? 0 : 20,
-    translateX: buttonVisible ? (variant === 'primary' ? 0 : 0) : 20,
-    rotate: buttonVisible ? 0 : 1,
-    scale: buttonScale || 1,
-    pointerEvents: buttonVisible ? ('auto' as const) : ('none' as const),
-})
-
-const getHoverAnimation = (variant: 'primary' | 'secondary') => ({
-    translateY: 6,
-    translateX: variant === 'primary' ? 0 : 3,
-    rotate: 0.75,
-})
-
-const transitionConfig = { type: 'spring', damping: 15 } as const
 
 const getButtonContainerClasses = (variant: 'primary' | 'secondary') =>
     `relative z-20 mt-8 md:mt-12 ${variant === 'primary' ? 'mx-auto w-fit' : 'right-[calc(50%-120px)]'}`
@@ -100,38 +77,34 @@ const renderArrows = (variant: 'primary' | 'secondary', arrowOpacity: number, bu
     )
 
 export function Hero({ heading, primaryCta, secondaryCta, buttonVisible, buttonScale = 1 }: HeroProps) {
-    const [screenWidth, setScreenWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200)
-    const [scrollY, setScrollY] = useState(0)
-
-    useEffect(() => {
-        const handleResize = () => {
-            setScreenWidth(window.innerWidth)
-        }
-
-        const handleScroll = () => {
-            setScrollY(window.scrollY)
-        }
-
-        handleResize()
-        window.addEventListener('resize', handleResize)
-        window.addEventListener('scroll', handleScroll)
+    const screenWidth = useResizeHandler()
+    const scrollY = useScrollHandler()
+
+    const primaryButtonAnimation = createButtonAnimation(
+        buttonVisible || false,
+        buttonScale,
+        { translateX: 0 },
+        { translateX: 0 }
+    )
 
-        return () => {
-            window.removeEventListener('resize', handleResize)
-            window.removeEventListener('scroll', handleScroll)
-        }
-    }, [])
+    const secondaryButtonAnimation = createButtonAnimation(
+        buttonVisible || false,
+        buttonScale,
+        { translateX: 4 },
+        { translateX: 3 }
+    )
 
     const renderCTAButton = (cta: CTAButton, variant: 'primary' | 'secondary') => {
         const arrowOpacity = 1 // Always visible
+        const animation = variant === 'primary' ? primaryButtonAnimation : secondaryButtonAnimation
 
         return (
             <motion.div
                 className={getButtonContainerClasses(variant)}
-                initial={getInitialAnimation(variant)}
-                animate={getAnimateAnimation(variant, buttonVisible, buttonScale)}
-                whileHover={getHoverAnimation(variant)}
-                transition={transitionConfig}
+                initial={animation.initial}
+                animate={animation.animate}
+                whileHover={animation.hover}
+                transition={animation.transition}
             >
                 {/* {renderSparkle(variant)} */}
 
@@ -161,7 +134,10 @@ export function Hero({ heading, primaryCta, secondaryCta, buttonVisible, buttonS
                     alt="Peanut Guy"
                 />
 
-                <Stack spacing={2} className="relative h-1/3 items-center justify-center px-4 text-center lg:h-full">
+                <Stack
+                    spacing={2}
+                    className="relative !mb-56 h-1/3 items-center justify-center px-4 text-center md:!mb-20 lg:h-full"
+                >
                     <img
                         src={ButterySmoothGlobalMoney.src}
                         className="z-0 mx-auto w-full max-w-[1000px] object-contain lg:w-3/4"

src/components/LandingPage/index.ts

@@ -1,7 +1,6 @@
 export * from './businessIntegrate'
 export * from './faq'
 export * from './hero'
-export * from './marquee'
 export * from './noFees'
 export * from './nutsDivider'
 export * from './securityBuiltIn'

src/components/LandingPage/noFees.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { motion } from 'framer-motion'
 import gotItHand from '@/assets/illustrations/got-it-hand.svg'
 import gotItHandFlipped from '@/assets/illustrations/got-it-hand-flipped.svg'
@@ -9,34 +9,19 @@ import noHiddenFees from '@/assets/illustrations/no-hidden-fees.svg'
 import { Star } from '@/assets'
 import scribble from '@/assets/scribble.svg'
 import Image from 'next/image'
+import { useResizeHandler, createStarAnimation, createCloudAnimation } from '@/hooks/useAnimations'
 
 export function NoFees() {
-    const [screenWidth, setScreenWidth] = useState(typeof window !== 'undefined' ? window.innerWidth : 1200)
+    const screenWidth = useResizeHandler()
 
-    useEffect(() => {
-        const handleResize = () => {
-            setScreenWidth(window.innerWidth)
-        }
+    const starAnimation1 = createStarAnimation(0.2, 5, { rotate: 22 }, { rotate: 22 })
+    const starAnimation2 = createStarAnimation(0.4, 5, { translateY: 28, translateX: -5, rotate: -17 }, { rotate: -17 })
+    const starAnimation3 = createStarAnimation(0.6, 5, { rotate: 22 }, { rotate: 22 })
+    const starAnimation4 = createStarAnimation(0.8, 5, { translateY: 15, translateX: -5, rotate: -7 }, { rotate: -7 })
+    const starAnimation5 = createStarAnimation(1.0, 5, { translateY: 25, translateX: -5, rotate: -5 }, { rotate: -5 })
 
-        handleResize()
-        window.addEventListener('resize', handleResize)
-        return () => window.removeEventListener('resize', handleResize)
-    }, [])
-
-    const createCloudAnimation = (side: 'left' | 'right', top: string, width: number, speed: number) => {
-        const vpWidth = screenWidth || 1080
-        const totalDistance = vpWidth + width
-
-        return {
-            initial: { x: side === 'left' ? -width : vpWidth },
-            animate: { x: side === 'left' ? vpWidth : -width },
-            transition: {
-                ease: 'linear',
-                duration: totalDistance / speed,
-                repeat: Infinity,
-            },
-        }
-    }
+    const cloud1Animation = createCloudAnimation('left', 200, 35, screenWidth)
+    const cloud2Animation = createCloudAnimation('right', 220, 40, screenWidth)
 
     return (
         <section className="relative overflow-hidden bg-secondary-3 px-4 py-24 md:py-40">
@@ -47,14 +32,14 @@ export function NoFees() {
                     alt="Floating Border Cloud"
                     className="absolute left-0"
                     style={{ top: '20%', width: 200 }}
-                    {...createCloudAnimation('left', '20%', 200, 35)}
+                    {...cloud1Animation}
                 />
                 <motion.img
                     src={borderCloud.src}
                     alt="Floating Border Cloud"
                     className="absolute right-0"
                     style={{ top: '60%', width: 220 }}
-                    {...createCloudAnimation('right', '60%', 220, 40)}
+                    {...cloud2Animation}
                 />
             </div>
 
@@ -63,52 +48,32 @@ export function NoFees() {
                 <motion.img
                     src={Star.src}
                     alt="Floating Star"
-                    width={50}
-                    height={50}
-                    className="absolute -right-36 -top-12"
-                    initial={{ opacity: 0, translateY: 20, translateX: 5, rotate: 22 }}
-                    whileInView={{ opacity: 1, translateY: 0, translateX: 0, rotate: 22 }}
-                    transition={{ type: 'spring', damping: 5, delay: 0.2 }}
+                    className="absolute -right-36 -top-12 w-8 md:w-12"
+                    {...starAnimation1}
                 />
                 <motion.img
                     src={Star.src}
                     alt="Floating Star"
-                    width={50}
-                    height={50}
-                    className="absolute -right-58 top-30"
-                    initial={{ opacity: 0, translateY: 28, translateX: -5, rotate: -17 }}
-                    whileInView={{ opacity: 1, translateY: 0, translateX: 0, rotate: -17 }}
-                    transition={{ type: 'spring', damping: 5, delay: 0.4 }}
+                    className="absolute -right-58 top-30 w-8 md:w-12"
+                    {...starAnimation2}
                 />
                 <motion.img
                     src={Star.src}
                     alt="Floating Star"
-                    width={50}
-                    height={50}
-                    className="absolute -right-0 -top-16 md:top-58"
-                    initial={{ opacity: 0, translateY: 20, translateX: 5, rotate: 22 }}
-                    whileInView={{ opacity: 1, translateY: 0, translateX: 0, rotate: 22 }}
-                    transition={{ type: 'spring', damping: 5, delay: 0.6 }}
+                    className="absolute -right-0 -top-16 w-8 md:top-58 md:w-12"
+                    {...starAnimation3}
                 />
                 <motion.img
                     src={Star.src}
                     alt="Floating Star"
-                    width={50}
-                    height={50}
-                    className="absolute -left-36 -top-20"
-                    initial={{ opacity: 0, translateY: 15, translateX: -5, rotate: -7 }}
-                    whileInView={{ opacity: 1, translateY: 0, translateX: 0, rotate: -7 }}
-                    transition={{ type: 'spring', damping: 5, delay: 0.8 }}
+                    className="absolute -left-36 -top-20 w-8 md:w-12"
+                    {...starAnimation4}
                 />
                 <motion.img
                     src={Star.src}
                     alt="Floating Star"
-                    width={50}
-                    height={50}
-                    className="absolute -bottom-6 -left-10"
-                    initial={{ opacity: 0, translateY: 25, translateX: -5, rotate: -5 }}
-                    whileInView={{ opacity: 1, translateY: 0, translateX: 0, rotate: -5 }}
-                    transition={{ type: 'spring', damping: 5, delay: 1.0 }}
+                    className="absolute -bottom-6 -left-10 w-8 md:w-12"
+                    {...starAnimation5}
                 />
                 {/* Main stylized headline */}
                 <div className="md:mb-4">