From 421e53fd2099346f6d9af275635a8d7e9c8e5bc7 Mon Sep 17 00:00:00 2001 From: tuanpep Date: Thu, 23 Mar 2023 18:09:46 +0700 Subject: [PATCH] responsive mobile --- src/pages/Animated.tsx | 102 +++++++++++++----- src/pages/Home.tsx | 2 +- src/shared/components/Footer.tsx | 10 +- src/shared/components/Header.tsx | 29 ++--- .../components/animated/Introduction.tsx | 40 ++++--- .../components/animated/MysteriousText.tsx | 22 ++++ src/shared/components/animated/Trail.tsx | 30 ------ src/shared/components/home/AboutSection.tsx | 23 ++-- src/shared/components/home/RoadMap.tsx | 50 +++++++-- .../components/home/TokenomicsSection.tsx | 59 ++++++++-- src/shared/components/layouts/HomeLayout.tsx | 1 + .../providers/RouterProviderComponent.tsx | 7 +- 12 files changed, 265 insertions(+), 110 deletions(-) create mode 100644 src/shared/components/animated/MysteriousText.tsx delete mode 100644 src/shared/components/animated/Trail.tsx diff --git a/src/pages/Animated.tsx b/src/pages/Animated.tsx index 38a05cd..a422499 100644 --- a/src/pages/Animated.tsx +++ b/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(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 (
- + + +
+ + - - - - - - + > - + /> */} {/* section 1 */} parallax.current.scrollTo(1)} style={{ display: "flex", alignItems: "center", justifyContent: "center", }} + id="section1" + onClick={() => parallax.current.scrollTo(1)} + onScroll={(e) => { + console.log("e", e); + }} > @@ -153,7 +178,7 @@ function Animated() { justifyContent: "center", }} > - + parallax.current.scrollTo(3)} + > + + + + parallax.current.scrollTo(0)} + > + + + + parallax.current.scrollTo(0)} > - +
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx index 7cf0ce1..e0afefc 100644 --- a/src/pages/Home.tsx +++ b/src/pages/Home.tsx @@ -7,7 +7,7 @@ type Props = {}; const Home = (props: Props) => { return ( -
+
diff --git a/src/shared/components/Footer.tsx b/src/shared/components/Footer.tsx index bfd65a1..dc8f5ba 100644 --- a/src/shared/components/Footer.tsx +++ b/src/shared/components/Footer.tsx @@ -4,7 +4,7 @@ type Props = {}; const Footer = (props: Props) => { return ( -
+
{
-

NFT Systems

-

Team

-

Privacy Policy

-

Terms & Conditions

+

NFT Systems

+

Team

+

Privacy Policy

+

Terms & Conditions

); diff --git a/src/shared/components/Header.tsx b/src/shared/components/Header.tsx index b96ad58..a0fd101 100644 --- a/src/shared/components/Header.tsx +++ b/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,13 +32,18 @@ const Header = (props: Props) => { const [isScrolled, setIsScrolled] = React.useState(false); React.useEffect(() => { - window.addEventListener("scroll", () => { - if (window.scrollY > 0) { - setIsScrolled(true); - } else { - setIsScrolled(false); - } - }); + // check is mobile or tablet + if (window.innerWidth <= 1024) { + setIsScrolled(true); + } else { + window.addEventListener("scroll", () => { + if (window.scrollY > 0) { + setIsScrolled(true); + } else { + setIsScrolled(false); + } + }); + } }, []); const jumpToSection = (section: string) => { diff --git a/src/shared/components/animated/Introduction.tsx b/src/shared/components/animated/Introduction.tsx index 593745d..495f0ce 100644 --- a/src/shared/components/animated/Introduction.tsx +++ b/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 ( -
+

- - A digital currency - payment for SGPT - chat bot services - + + A digital currency payment for SGPT chat bot services +

- 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. + + 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. +

-
+

Join Our Community

diff --git a/src/shared/components/animated/MysteriousText.tsx b/src/shared/components/animated/MysteriousText.tsx new file mode 100644 index 0000000..9622aad --- /dev/null +++ b/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) => ( + + {item} + + ))} + + ); +}; + +export default MysteriousText; diff --git a/src/shared/components/animated/Trail.tsx b/src/shared/components/animated/Trail.tsx deleted file mode 100644 index db4f82e..0000000 --- a/src/shared/components/animated/Trail.tsx +++ /dev/null @@ -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 = ({ 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 ( -
- {trail.map(({ height, ...style }, index) => ( - - {items[index]} - - ))} -
- ); -}; - -export default Trail; diff --git a/src/shared/components/home/AboutSection.tsx b/src/shared/components/home/AboutSection.tsx index 986004b..d2aa4b6 100644 --- a/src/shared/components/home/AboutSection.tsx +++ b/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) => {

What is SGPT?

-

- 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. +

+ + 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. +

SGPT Solution

-

+

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 diff --git a/src/shared/components/home/RoadMap.tsx b/src/shared/components/home/RoadMap.tsx index a6a3fae..7437674 100644 --- a/src/shared/components/home/RoadMap.tsx +++ b/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 ( -

+

RoadMap

-
+
{roadMapData.map((item, index) => { return ( -

{item.phase} @@ -64,7 +102,7 @@ const RoadMap = (props: Props) => { ); })} -

+ ); })}
diff --git a/src/shared/components/home/TokenomicsSection.tsx b/src/shared/components/home/TokenomicsSection.tsx index aee97db..116756b 100644 --- a/src/shared/components/home/TokenomicsSection.tsx +++ b/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 ( -
+
-

+

Tokenomics

-
-
- +
+
+
    {tokenomics.map((item, index) => { return ( -
  • { {item.title}

    {item.description}

    -
    • + ); })}
diff --git a/src/shared/components/layouts/HomeLayout.tsx b/src/shared/components/layouts/HomeLayout.tsx index ea509b0..39836aa 100644 --- a/src/shared/components/layouts/HomeLayout.tsx +++ b/src/shared/components/layouts/HomeLayout.tsx @@ -11,6 +11,7 @@ const HomeLayout = (props: Props) => {
+
); }; diff --git a/src/shared/providers/RouterProviderComponent.tsx b/src/shared/providers/RouterProviderComponent.tsx index b8b88af..21c3514 100644 --- a/src/shared/providers/RouterProviderComponent.tsx +++ b/src/shared/providers/RouterProviderComponent.tsx @@ -8,11 +8,14 @@ const router = createBrowserRouter([ path: "/", element: , children: [ - { path: "", element: }, { - path: "fuck", + path: "animated", element: , }, + { + path: "", + element: , + }, ], }, ]);