add: major changes

src/App.js

@@ -1,4 +1,3 @@
-import Appbar from "./components/Appbar";
 import { Box, useMediaQuery, useTheme } from "@mui/material";
 import Home from "./pages/Home/Home";
 import About from "./pages/About/About";
@@ -13,18 +12,16 @@ import retro from "./themes/retro";
 import React, { useEffect, useRef } from 'react';
 import useGsap, { appear } from "./hooks/useGsap";
 import gsap from "gsap";
-import { ScrollTrigger } from "gsap/ScrollTrigger";
-import LogoText from "./assets/svg/logo_text.svg";
-import LogoMascot from "./assets/svg/logo_mascot.svg";
 import Gallery from "./pages/Gallery/Gallery";
 import Lenis from "@studio-freight/lenis";
 import Contact from "./pages/Contact/Contact";
 import Events from "./pages/Events/Events";
 import Countdown from "./components/page/beforerelease";
 import Ambassador from "./pages/Ambassadors";
-import BeforeReleaseLayout from "./components/page/layout";
 import Team from './pages/Team/Team';
 import Game from './pages/Game/Game';
+import ScrollTrigger from 'gsap/ScrollTrigger'
+
 function App() {
   const root = useRef();
   const theme = useTheme();
@@ -46,6 +43,7 @@ function App() {
       ease: "expo.out",
     });
 
+
     if (!mobile)
       timeline.fromTo(
         ".appbar .menu",
@@ -75,13 +73,76 @@ function App() {
     requestAnimationFrame(raf);
 
   });
+
+  useEffect(() => {
+
+    const sections = gsap.utils.toArray('section.section')
+
+    gsap.to('.animateImage', {
+      scrollTrigger: {
+        scrub: true
+      },
+      y: (i, target) => -ScrollTrigger.maxScroll(window) * target.dataset.speed,
+      ease: "none",
+    });
+
+
+
+    sections.forEach((section, index) => {
+      const box = section.querySelectorAll('.gradient-box')
+      const title = section.querySelector('.gradient-text')
+      const images = section.querySelectorAll('.animateImage')
+
+      const timeline = gsap.timeline({
+        ease: 'power4.out',
+        scrollTrigger: {
+          trigger: box,
+          start: 'top center',
+          end: 'bottom center',
+          toggleActions: 'play none none reverse',
+          }
+      })
+
+
+
+
+
+
+
+
+      timeline.from(title,{
+        opacity: 0
+      })
+
+
+
+
+
+      timeline.fromTo(
+        box,
+        {
+          x: -100
+        },
+        {
+          x: 0,
+          stagger: 0.1,
+          duration: 0.5,
+          ease: 'power4.in',
+        }, '<'
+      );
+
+
+
+
+
+
+    })
+  }, []);
   return (
     <ThemeProvider theme={retro("dark")}>
       <Box
         ref={root}
-        sx={{
-          bgcolor: "background.default",
-        }}
+
         className="App"
       >
         <Countdown />
@@ -116,4 +177,10 @@ function App() {
   );
 }
 
+export const animateOnScroll = (trigger, target) => {
+
+
+};
+
+
 export default App;

src/components/Appbar.js

@@ -58,26 +58,6 @@ const Appbar = ({ isGuest = false }) => {
   const color = theme.palette.text.primary;
   const ref = useRef();
 
-  // useLayoutEffect(() => {
-  //   const timeline = gsap.timeline({
-  //     scrollTrigger: {
-  //       trigger: '.appbar-trigger',
-  //       markers: true,
-  //       start: 'top top',
-  //       end: '+=1000',
-  //       scrub: true,
-  //     }
-  //   })
-  //
-  //   timeline.from('.content', {
-  //     scale: 1,
-  //     left: 50,
-  //     top: 0,
-  //     duration: 2
-  //   })
-  //
-  // }, []);
-
 
   if (isGuest)
     navLinks = navLinks.filter(
@@ -144,7 +124,6 @@ const FullscreenNav = () => {
       <Box sx={{
         backgroundColor: 'black'
       }}>
-        <Patternbg>
 
         <Spacer size='md'/>
         <Container maxWidth='md'>
@@ -194,7 +173,6 @@ const FullscreenNav = () => {
             <FiX />
           </IconButton>
         </Container>
-        </Patternbg>
       </Box>
     </Dialog>
     </div>

src/components/Spacer.js

@@ -21,7 +21,7 @@ const Spacer = ({ size }) => {
 
     const spacerSize = getSize(size);
 
-    return <Box sx={{ m: `${spacerSize}rem` }} />;
+    return <Box sx={{ p: `${spacerSize}rem` }} />;
 };
 
 export default Spacer;

src/components/common/footer.js

@@ -48,41 +48,6 @@ const Footer = () => {
 
 
 
-  useGsap('.footer', ()=> {
-    const timeline = gsap.timeline({
-      scrollTrigger: {
-        trigger: '.footer',
-        // markers: true,
-        scrub: true,
-      }
-    })
-
-    timeline.from('.content', {
-      scale: 3,
-      left: 0,
-      top: 0,
-      rotateZ: 360,
-      duration: 2,
-      ease: 'expo.inOut'
-    })
-
-  })
-
-  useLayoutEffect(() => {
-    if (!layoutState || !q) return;
-
-    const flip = Flip.from(layoutState, {
-      duration: 0.6,
-      // fade: true,/
-      absolute: true,
-      targets: q(".content"),
-    });
-
-    return () => {
-      flip.kill();
-    };
-  }, [layoutState]);
-
   const handleClick = () => {
     setToggle(prev => !prev)
     const containers = q(".content")
@@ -101,7 +66,7 @@ const Footer = () => {
       className='footer'
       ref={ref}
     >
-      <Container maxWidth="lg">
+      <Container maxWidth="lg" >
         <Grid container spacing={3} justifyContent="space-between">
           <Grid item xs={12} sm={6} md={3}>
             <Typography variant="h6">Contact Us</Typography>
@@ -139,7 +104,6 @@ const Footer = () => {
               </IconButton>
             </a>
           </Grid>
-          <Button onClick={handleClick}>AnAS</Button>
           <Grid item xs={12} sm={6} md={3}>
           <Typography variant="h6">Quick Links</Typography>
           {linksData.map((link, index) => (

src/components/common/gradientbox.js

@@ -5,7 +5,7 @@ import barcode from '../../assets/png/barcode.webp'
 const GradientBox = ({
   children,
   height = "auto",
-  background = "linear-gradient(to top left, #00b8ff, transparent 75%)",
+  background = "black linear-gradient(to top left, #00b8ff, transparent 75%)",
   img = null,
   rotate = "-20deg",
   size = "medium",
@@ -15,6 +15,9 @@ const GradientBox = ({
 }) => {
 
   return (
+    <Box
+      className={className}
+    >
     <Box sx={{
       overflow: 'hidden',
       position: 'relative',
@@ -65,7 +68,6 @@ const GradientBox = ({
       height={height}
       position="relative"
       overflow="hidden"
-      className={className}
       // Add the background image here
       sx={{
         '::after': {
@@ -88,15 +90,16 @@ const GradientBox = ({
           content: "''",
           position: "absolute",
           width: '100%',
-          height: '250px',
-          bottom: 0,
+          height: '100%',
+          top: 0,
           right: 0,
           backgroundImage: `url(${img})`,
           backgroundSize: "cover",
           backgroundPosition: "center",
           opacity: 1, // Adjust opacity as needed
           zIndex: -1,
           backgroundRepeat: 'no-repeat',// Place it behind the main content
+          filter: 'blur(2px)'
         },
 
       }}
@@ -120,6 +123,7 @@ const GradientBox = ({
       )}
     </Box>
     </Box>
+    </Box>
   );
 };
 

src/components/common/gradienttext.js

@@ -22,6 +22,7 @@ const GradientText = ({ primary, secondary, ...props }) => {
       fontFamily="typography.fontFamily"
       letterSpacing="-1px"
       fontSize="48px"
+      className='gradient-text'
       lineHeight="1.2" // Adjust the line height as needed for better appearance
       sx={{
         background: boxBackground, // Gradient colors from top left to bottom right

src/components/common/patternbg.js

@@ -1,13 +1,45 @@
 import React from 'react';
 import dots from '../../assets/png/dots-2.png';
-import { Box } from '@mui/material';
+import { Box, Container, Typography } from '@mui/material';
+import satelite from '../../assets/png/satelite.png'
+import planet from '../../assets/png/planet.png'
+import robot from '../../assets/png/ship.png'
+import planet2 from '../../assets/png/planet-2.png'
 
-const Patternbg = ({children}) => {
+const Patternbg = ({ children }) => {
   return (
-    <Box sx={{
-      backgroundImage: `url(${dots})`
-    }}>
-      {children}
+    <Box overflow='hidden' component='section' className='section' position='relative' bgcolor='black'>
+
+      {/* Left-side divs */}
+      <Container maxWidth='lg' sx={{position: 'relative'}}>
+        <div style={{ position: 'absolute', left: '-100px', top: '20%', zIndex: 0, filter: 'blur(8px)'}}>
+          <img width='400px' src={satelite} alt="Random content 1" className="animateImage" data-speed=".1"/>
+        </div>
+        <div style={{ position: 'absolute', left: '-20px', top: '20%', zIndex: 1 }}>
+        <img width='200px' src={satelite} alt="Random content 1" className="animateImage" data-speed=".4"/>
+      </div>
+      <div style={{ position: 'absolute', left: '-20px', bottom: '40%', zIndex: 1 }}>
+        <img  width='144px' src={planet2} alt="Random content 2" className="animateImage" data-speed=".2"/>
+      </div>
+
+      {/* Right-side divs */}
+      <div style={{ position: 'absolute', right: '-20px', top: '40%', zIndex: 1, transform: 'rotateZ(180deg)' }}>
+        <img width='140px' src={robot} alt="Random content 3" className="animateImage" data-speed=".3"/>
+      </div>
+      <div style={{ position: 'absolute', right: '-20px', bottom: '20%', zIndex: 1 }}>
+        <img  width='144px' src={planet} alt="Random content 4" className="animateImage" data-speed=".2"/>
+      </div>
+
+        <div style={{ position: 'absolute', right: '-100px', bottom: '20%', zIndex: 0, filter: 'blur(8px)' }}>
+          <img  width='400px' src={planet} alt="Random content 4" className="animateImage" data-speed=".1"/>
+        </div>
+
+      {/* Main content */}
+      <Box zIndex={0} position='relative'>
+        {children}
+      </Box>
+      </Container>
+
     </Box>
   );
 };