responsive mobile

src/pages/Animated.tsx

@@ -1,6 +1,18 @@
-import React, { useRef } from "react";
-import { Parallax, ParallaxLayer, IParallax } from "@react-spring/parallax";
+import {
+  IParallax,
+  IParallaxLayer,
+  Parallax,
+  ParallaxLayer,
+} from "@react-spring/parallax";
+import { useScroll } from "@react-spring/web";
+import React, { useEffect } from "react";
+import { useRef } from "react";
 import Introduction from "../shared/components/animated/Introduction";
+import Footer from "../shared/components/Footer";
+import Header from "../shared/components/Header";
+import AboutSection from "../shared/components/home/AboutSection";
+import RoadMap from "../shared/components/home/RoadMap";
+import TokenomicsSection from "../shared/components/home/TokenomicsSection";
 
 // Little helpers ...
 const url = (name: string, wrap = false) =>
@@ -12,41 +24,52 @@ const url = (name: string, wrap = false) =>
 
 function Animated() {
   const parallax = useRef<IParallax>(null!);
+  const [isScrolled, setIsScrolled] = React.useState(false);
+
+  const onScroll = () => {
+    if (parallax.current.container.current.scrollTop > 0) {
+      setIsScrolled(true);
+    } else {
+      setIsScrolled(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!parallax.current || !parallax.current.container) return;
+    parallax.current.container.current.onscroll = onScroll;
+  });
+
   return (
     <div className="w-full min-h-screen bg-[#253237]">
-      <Parallax ref={parallax} pages={3}>
+      <Parallax ref={parallax} pages={4.2}>
+        <ParallaxLayer
+          sticky={{ start: 0, end: 4 }}
+          style={{ height: "fit-content" }}
+        >
+          <Header />
+        </ParallaxLayer>
+
         <ParallaxLayer
           offset={1}
           speed={1}
-          style={{ backgroundColor: "#805E73" }}
+          style={{ backgroundColor: "#133955" }}
         />
         <ParallaxLayer
           offset={2}
           speed={1}
-          style={{ backgroundColor: "#87BCDE" }}
+          style={{ backgroundColor: "#3A7575" }}
         />
 
         <ParallaxLayer
           offset={0}
           speed={0}
-          factor={3}
+          factor={4}
           style={{
             backgroundImage: url("stars", true),
             backgroundSize: "cover",
           }}
         />
 
-        <ParallaxLayer
-          offset={1.3}
-          speed={-0.3}
-          style={{ pointerEvents: "none" }}
-        >
-          <img
-            src={url("satellite4")}
-            style={{ width: "15%", marginLeft: "70%" }}
-          />
-        </ParallaxLayer>
-
         <ParallaxLayer offset={1} speed={0.8} style={{ opacity: 0.1 }}>
           <img
             src={url("cloud")}
@@ -115,11 +138,9 @@ function Animated() {
             justifyContent: "center",
             pointerEvents: "none",
           }}
-        >
-          <img src={url("earth")} style={{ width: "60%" }} />
-        </ParallaxLayer>
+        ></ParallaxLayer>
 
-        <ParallaxLayer
+        {/* <ParallaxLayer
           offset={2}
           speed={-0.3}
           style={{
@@ -127,18 +148,22 @@ function Animated() {
             backgroundPosition: "center",
             backgroundImage: url("clients", true),
           }}
-        />
+        /> */}
 
         {/* section 1 */}
         <ParallaxLayer
           offset={0}
           speed={0.1}
-          onScroll={() => parallax.current.scrollTo(1)}
           style={{
             display: "flex",
             alignItems: "center",
             justifyContent: "center",
           }}
+          id="section1"
+          onClick={() => parallax.current.scrollTo(1)}
+          onScroll={(e) => {
+            console.log("e", e);
+          }}
         >
           <Introduction />
         </ParallaxLayer>
@@ -153,7 +178,7 @@ function Animated() {
             justifyContent: "center",
           }}
         >
-          <img src={url("bash")} style={{ width: "40%" }} />
+          <AboutSection />
         </ParallaxLayer>
 
         <ParallaxLayer
@@ -164,9 +189,36 @@ function Animated() {
             alignItems: "center",
             justifyContent: "center",
           }}
+          onClick={() => parallax.current.scrollTo(3)}
+        >
+          <RoadMap />
+        </ParallaxLayer>
+
+        <ParallaxLayer
+          offset={3}
+          speed={-0}
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+          onClick={() => parallax.current.scrollTo(0)}
+        >
+          <TokenomicsSection />
+        </ParallaxLayer>
+
+        <ParallaxLayer
+          offset={4}
+          speed={-0}
+          style={{
+            display: "flex",
+            alignItems: "start",
+            justifyContent: "center",
+            backgroundColor: "#000000",
+          }}
           onClick={() => parallax.current.scrollTo(0)}
         >
-          <img src={url("clients-main")} style={{ width: "40%" }} />
+          <Footer />
         </ParallaxLayer>
       </Parallax>
     </div>

src/pages/Home.tsx

@@ -7,7 +7,7 @@ type Props = {};
 
 const Home = (props: Props) => {
   return (
-    <div className="flex flex-col gap-20">
+    <div className="flex flex-col gap-20 bg-[#253237]">
       <FirstSection />
       <AboutSection />
       <RoadMap />

src/shared/components/Footer.tsx

@@ -4,7 +4,7 @@ type Props = {};
 
 const Footer = (props: Props) => {
   return (
-    <div className="container mx-auto flex justify-between text-white py-12">
+    <div className="container mx-auto md: px-4 flex flex-col gap-4 items-center md:flex-row justify-between text-white py-12">
       <div className="md:w-1/4 flex gap-2 items-center">
         <div className="bg-white rounded-full overflow-hidden p-1">
           <img
@@ -22,10 +22,10 @@ const Footer = (props: Props) => {
       </div>
 
       <div className="md:w-2/5 flex justify-between items-center">
-        <p>NFT Systems</p>
-        <p>Team</p>
-        <p>Privacy Policy</p>
-        <p>Terms & Conditions</p>
+        <p className="text-center">NFT Systems</p>
+        <p className="text-center">Team</p>
+        <p className="text-center">Privacy Policy</p>
+        <p className="text-center">Terms & Conditions</p>
       </div>
     </div>
   );

src/shared/components/Header.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import Button from "./Button";
 import robotLogo from "../../assets/images/robot-logo.png";
 import { BsNewspaper, BsGithub } from "react-icons/bs";
@@ -17,14 +17,14 @@ const menuItems = [
     id: "about",
   },
   {
-    name: "Tokenomics",
+    name: "Roadmap",
     path: "",
-    id: "tokenomics",
+    id: "roadmap",
   },
   {
-    name: "Roadmap",
+    name: "Tokenomics",
     path: "",
-    id: "roadmap",
+    id: "tokenomics",
   },
 ];
 
@@ -32,6 +32,10 @@ const Header = (props: Props) => {
   const [isScrolled, setIsScrolled] = React.useState(false);
 
   React.useEffect(() => {
+    // check is mobile or tablet
+    if (window.innerWidth <= 1024) {
+      setIsScrolled(true);
+    } else {
       window.addEventListener("scroll", () => {
         if (window.scrollY > 0) {
           setIsScrolled(true);
@@ -39,6 +43,7 @@ const Header = (props: Props) => {
           setIsScrolled(false);
         }
       });
+    }
   }, []);
 
   const jumpToSection = (section: string) => {

src/shared/components/animated/Introduction.tsx

@@ -1,5 +1,4 @@
-import { useTrail } from "@react-spring/web";
-import React from "react";
+import { useEffect } from "react";
 import {
   BsDiscord,
   BsFacebook,
@@ -8,28 +7,41 @@ import {
   BsTwitter,
 } from "react-icons/bs";
 import Button from "../Button";
-import Trail from "./Trail";
+import MysteriousText from "./MysteriousText";
 
 type Props = {};
 
 const Introduction = (props: Props) => {
+  // create animate when user scroll to this section
+  useEffect(() => {
+    const section = document.getElementById("section1");
+    if (section) {
+      section.addEventListener("scroll", () => {
+        console.log("scroll");
+      });
+    }
+  }, []);
+
   return (
-    <div className="flex flex-col gap-10 items-center text-white lg:w-3/4 max-w-4xl">
+    <div
+      className="flex flex-col gap-10 items-center text-white p-10 lg:p-0 lg:w-3/4 max-w-4xl"
+      id="section1"
+    >
       <h4 className="lg:text-8xl md:text-7xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-pink-600">
-        <Trail open={true}>
-          <span>A digital currency</span>
-          <span>payment for SGPT</span>
-          <span>chat bot services</span>
-        </Trail>
+        <MysteriousText>
+          A digital currency payment for SGPT chat bot services
+        </MysteriousText>
       </h4>
       <p className="w-full font-body text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-purple-300">
-        The SGPT Token is a digital currency designed to facilitate payments for
-        services provided by the SGPT chat bot. The chat bot is a powerful tool
-        that utilizes artificial intelligence to communicate with users and
-        provide valuable information and services.
+        <MysteriousText>
+          The SGPT Token is a digital currency designed to facilitate payments
+          for services provided by the SGPT chat bot. The chat bot is a powerful
+          tool that utilizes artificial intelligence to communicate with users
+          and provide valuable information and services.
+        </MysteriousText>
       </p>
 
-      <div className="flex flex-col justify-center mt-[15vh]">
+      <div className="flex flex-col justify-center mt-[15vh] z-50">
         <h2 className="text-3xl mb-4 font-bold text-center">
           Join Our Community
         </h2>

src/shared/components/animated/MysteriousText.tsx

@@ -0,0 +1,22 @@
+import { useSpring, animated } from "@react-spring/web";
+import React from "react";
+
+type Props = {
+  children: string;
+};
+
+const MysteriousText = ({ children, ...props }: Props) => {
+  const animation = (i: any) =>
+    useSpring({ opacity: 1, from: { opacity: 0 }, delay: Math.random() * 500 });
+  return (
+    <>
+      {children.split("").map((item, index) => (
+        <animated.span key={index} style={animation(index)} {...props}>
+          {item}
+        </animated.span>
+      ))}
+    </>
+  );
+};
+
+export default MysteriousText;

src/shared/components/animated/Trail.tsx

@@ -1,30 +0,0 @@
-import { a, useTrail } from "@react-spring/web";
-import React from "react";
-import styles from "./styles.module.css";
-
-type Props = {
-  open: boolean;
-  children: React.ReactNode;
-};
-
-const Trail: React.FC<Props> = ({ open, children }) => {
-  const items = React.Children.toArray(children);
-  const trail = useTrail(items.length, {
-    config: { mass: 5, tension: 2000, friction: 200 },
-    opacity: open ? 1 : 0,
-    x: open ? 0 : 20,
-    height: open ? 110 : 0,
-    from: { opacity: 0, x: 20, height: 0 },
-  });
-  return (
-    <div>
-      {trail.map(({ height, ...style }, index) => (
-        <a.div key={index} className="will-change-auto" style={style}>
-          <a.div style={{ height }}>{items[index]}</a.div>
-        </a.div>
-      ))}
-    </div>
-  );
-};
-
-export default Trail;

src/shared/components/home/AboutSection.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import aboutImage from "../../../assets/images/robot32.png";
+import MysteriousText from "../animated/MysteriousText";
 type Props = {};
 
 const AboutSection = (props: Props) => {
@@ -11,23 +12,29 @@ const AboutSection = (props: Props) => {
     <div
       className="container mx-auto text-white py-20 flex relative"
       id="about"
+      style={{
+        backgroundImage: `url(https://awv3node-homepage.surge.sh/build/assets/stars.svg)}`,
+      }}
     >
       <div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full px-8">
         <div className="flex flex-col gap-4">
           <h4 className="text-5xl uppercase font-bold">What is SGPT?</h4>
-          <p className="text-gray-300 md:w-4/5 text-lg">
+          <p className="text-gray-100 md:w-4/5 text-lg">
+            <MysteriousText>
               SGPT Token is a complementary token created on the blockchain
-            platform to provide a platform for small and medium-sized businesses
-            (SMBs) to create and manage an internal Q&A system. SGPT Token will
-            be used to conduct transactions on the platform and provide benefits
-            to members of the internal Q&A system. SGPT Token will also be used
-            to reward members who make positive contributions to the system.
+              platform to provide a platform for small and medium-sized
+              businesses (SMBs) to create and manage an internal Q&A system.
+              SGPT Token will be used to conduct transactions on the platform
+              and provide benefits to members of the internal Q&A system. SGPT
+              Token will also be used to reward members who make positive
+              contributions to the system.
+            </MysteriousText>
           </p>
         </div>
 
         <div className="flex flex-col gap-4">
           <h4 className="text-5xl uppercase font-bold">SGPT Solution</h4>
-          <p className="text-gray-300 md:w-4/5 text-lg">
+          <p className="text-gray-100 md:w-4/5 text-lg">
             The SGPT Token is a solution to the problems associated with
             traditional payment methods for chat bot services. The token is
             built on blockchain technology, which ensures that transactions are

src/shared/components/home/RoadMap.tsx

@@ -1,4 +1,5 @@
-import React from "react";
+import { useSpring, animated } from "@react-spring/web";
+import React, { useEffect, useRef, useState } from "react";
 import { VscDebugBreakpointLog } from "react-icons/vsc";
 
 type Props = {};
@@ -40,16 +41,53 @@ const roadMapData = [
 ];
 
 const RoadMap = (props: Props) => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const section = document.querySelector(".animate-on-scroll");
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 0.5 }
+    );
+
+    if (!section) {
+      return;
+    }
+    observer.observe(section);
+
+    return () => {
+      observer.unobserve(section);
+    };
+  }, []);
+
+  useEffect(() => {
+    console.log("isVisible", isVisible);
+  }, [isVisible]);
+
+  const styles = useSpring({
+    opacity: isVisible ? 1 : 0,
+    transform: isVisible ? "translateY(0)" : "translateY(100px)",
+    config: {
+      duration: 500,
+    },
+  });
+
   return (
-    <div className="container mx-auto text-white md:min-h-[60vh]" id="roadmap">
+    <div
+      className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20"
+      id="roadmap"
+    >
       <h1 className="text-5xl font-bold text-center">RoadMap</h1>
 
-      <div className="flex flex-col gap-10 mt-20 justify-center px-10 lg:px-0">
+      <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0">
         {roadMapData.map((item, index) => {
           return (
-            <div
+            <animated.div
               key={index}
-              className="lg:w-1/4 bg-[conic-gradient(at_left,_var(--tw-gradient-stops))] from-orange-400 to-rose-400 rounded-lg min-h-[250px] p-5"
+              className="lg:w-1/4 bg-[#E24666] rounded-lg min-h-[250px] p-5"
+              style={styles}
             >
               <h4 className="text-center text-3xl text-gray-100 font-semibold mb-6">
                 {item.phase}
@@ -64,7 +102,7 @@ const RoadMap = (props: Props) => {
                   );
                 })}
               </ol>
-            </div>
+            </animated.div>
           );
         })}
       </div>

src/shared/components/home/TokenomicsSection.tsx

@@ -1,3 +1,5 @@
+import { useSpring, animated } from "@react-spring/web";
+import { useEffect, useState } from "react";
 import tokenomicChart from "../../../assets/images/tokenomic-chart.png";
 
 type Props = {};
@@ -46,25 +48,68 @@ const tokenomics = [
 ];
 
 const TokenomicsSection = (props: Props) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    const section = document.querySelector("#tokenomics");
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        setIsVisible(entry.isIntersecting);
+      },
+      { threshold: 0.5 }
+    );
+
+    if (!section) {
+      return;
+    }
+    observer.observe(section);
+
+    return () => {
+      observer.unobserve(section);
+    };
+  }, []);
+
+  useEffect(() => {
+    console.log("isVisible", isVisible);
+  }, [isVisible]);
+
+  const styles = useSpring({
+    opacity: isVisible ? 1 : 0,
+    from: {
+      opacity: 0,
+      transform: "translateY(100px)",
+    },
+    to: {
+      opacity: isVisible ? 1 : 0,
+      transform: "translateY(0px)",
+    },
+
+    config: {
+      duration: 500,
+    },
+  });
   return (
-    <div className="w-full bg-white py-24" id="tokenomics">
+    <div className="w-full  py-24" id="tokenomics">
       <div className="container mx-auto">
-        <h1 className="text-5xl font-bold text-center text-black mb-20">
+        <h1 className="text-5xl text-white font-bold text-center mb-20">
           Tokenomics
         </h1>
 
-        <div className="w-full flex flex-col lg:flex-row">
-          <div className="lg:w-1/2">
-            <img src={tokenomicChart} alt="" />
+        <div className="w-full flex flex-col gap-4 lg:flex-row">
+          <div className="lg:w-1/2 flex justify-center">
+            <img src={tokenomicChart} alt="" className="rounded-3xl w-[80%]" />
           </div>
 
           <div className="lg:w-1/2">
             <ul className="flex flex-col items-end justify-center h-full gap-3 px-3">
               {tokenomics.map((item, index) => {
                 return (
-                  <li
+                  <animated.li
                     key={index}
                     className={`text-center w-full lg:w-2/3 bg-slate-200  py-3 relative`}
+                    style={{
+                      ...styles,
+                    }}
                   >
                     <div
                       className={`absolute h-full top-0 w-2 ${item.color}`}
@@ -73,7 +118,7 @@ const TokenomicsSection = (props: Props) => {
                       {item.title}
                     </h4>
                     <p className="text-gray-500">{item.description}</p>
-                  </li>
+                  </animated.li>
                 );
               })}
             </ul>

src/shared/components/layouts/HomeLayout.tsx

@@ -11,6 +11,7 @@ const HomeLayout = (props: Props) => {
       <div className="w-full">
         <Outlet />
       </div>
+      <Footer />
     </div>
   );
 };

src/shared/providers/RouterProviderComponent.tsx

@@ -8,11 +8,14 @@ const router = createBrowserRouter([
     path: "/",
     element: <HomeLayout />,
     children: [
-      { path: "", element: <Home /> },
       {
-        path: "fuck",
+        path: "animated",
         element: <Animated />,
       },
+      {
+        path: "",
+        element: <Home />,
+      },
     ],
   },
 ]);