diff --git a/package-lock.json b/package-lock.json index 7f93d90..89ceb19 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,8 @@ "name": "spgt-landing-page", "version": "0.0.0", "dependencies": { + "@react-spring/parallax": "^9.7.1", + "@react-spring/web": "^9.7.1", "localforage": "^1.10.0", "match-sorter": "^6.3.1", "react": "^18.2.0", @@ -427,6 +429,86 @@ "node": ">= 8" } }, + "node_modules/@react-spring/animated": { + "version": "9.7.1", + "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.1.tgz", + "integrity": "sha512-EX5KAD9y7sD43TnLeTNG1MgUVpuRO1YaSJRPawHNRgUWYfILge3s85anny4S4eTJGpdp5OoFV2kx9fsfeo0qsw==", + "dependencies": { + "@react-spring/shared": "~9.7.1", + "@react-spring/types": "~9.7.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/core": { + "version": "9.7.1", + "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.1.tgz", + "integrity": "sha512-8K9/FaRn5VvMa24mbwYxwkALnAAyMRdmQXrARZLcBW2vxLJ6uw9Cy3d06Z8M12kEqF2bDlccaCSDsn2bSz+Q4A==", + "dependencies": { + "@react-spring/animated": "~9.7.1", + "@react-spring/rafz": "~9.7.1", + "@react-spring/shared": "~9.7.1", + "@react-spring/types": "~9.7.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-spring/donate" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/parallax": { + "version": "9.7.1", + "resolved": "https://registry.npmjs.org/@react-spring/parallax/-/parallax-9.7.1.tgz", + "integrity": "sha512-1wBgDYaewB8CHdMWa2O3C2Cfvq2mt+neQLZz3+zHTH0CRUlbzC8Hsm78BCDiK8I1QzpLCtgwvv2rYAJchQuZ1A==", + "dependencies": { + "@react-spring/shared": "~9.7.1", + "@react-spring/web": "~9.7.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/rafz": { + "version": "9.7.1", + "resolved": "https://registry.npmjs.org/@react-spring/rafz/-/rafz-9.7.1.tgz", + "integrity": "sha512-JSsrRfbEJvuE3w/uvU3mCTuWwpQcBXkwoW14lBgzK9XJhuxmscGo59AgJUpFkGOiGAVXFBGB+nEXtSinFsopgw==" + }, + "node_modules/@react-spring/shared": { + "version": "9.7.1", + "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.1.tgz", + "integrity": "sha512-R2kZ+VOO6IBeIAYTIA3C1XZ0ZVg/dDP5FKtWaY8k5akMer9iqf5H9BU0jyt3Qtxn0qQY7whQdf6MTcWtKeaawg==", + "dependencies": { + "@react-spring/rafz": "~9.7.1", + "@react-spring/types": "~9.7.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@react-spring/types": { + "version": "9.7.1", + "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.1.tgz", + "integrity": "sha512-yBcyfKUeZv9wf/ZFrQszvhSPuDx6Py6yMJzpMnS+zxcZmhXPeOCKZSHwqrUz1WxvuRckUhlgb7eNI/x5e1e8CA==" + }, + "node_modules/@react-spring/web": { + "version": "9.7.1", + "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.1.tgz", + "integrity": "sha512-6uUE5MyKqdrJnIJqlDN/AXf3i8PjOQzUuT26nkpsYxUGOk7c+vZVPcfrExLSoKzTb9kF0i66DcqzO5fXz/Z1AA==", + "dependencies": { + "@react-spring/animated": "~9.7.1", + "@react-spring/core": "~9.7.1", + "@react-spring/shared": "~9.7.1", + "@react-spring/types": "~9.7.1" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@remix-run/router": { "version": "1.3.3", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.3.3.tgz", diff --git a/package.json b/package.json index b970964..6245e4d 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,8 @@ "preview": "vite preview" }, "dependencies": { + "@react-spring/parallax": "^9.7.1", + "@react-spring/web": "^9.7.1", "localforage": "^1.10.0", "match-sorter": "^6.3.1", "react": "^18.2.0", diff --git a/src/assets/images/robot-logo.png b/src/assets/images/robot-logo.png new file mode 100644 index 0000000..ce70b6b Binary files /dev/null and b/src/assets/images/robot-logo.png differ diff --git a/src/pages/Animated.tsx b/src/pages/Animated.tsx new file mode 100644 index 0000000..38a05cd --- /dev/null +++ b/src/pages/Animated.tsx @@ -0,0 +1,176 @@ +import React, { useRef } from "react"; +import { Parallax, ParallaxLayer, IParallax } from "@react-spring/parallax"; +import Introduction from "../shared/components/animated/Introduction"; + +// Little helpers ... +const url = (name: string, wrap = false) => + `${ + wrap ? "url(" : "" + }https://awv3node-homepage.surge.sh/build/assets/${name}.svg${ + wrap ? ")" : "" + }`; + +function Animated() { + const parallax = useRef(null!); + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* section 1 */} + parallax.current.scrollTo(1)} + style={{ + display: "flex", + alignItems: "center", + justifyContent: "center", + }} + > + + + + parallax.current.scrollTo(2)} + style={{ + display: "flex", + alignItems: "center", + justifyContent: "center", + }} + > + + + + parallax.current.scrollTo(0)} + > + + + +
+ ); +} + +export default Animated; diff --git a/src/shared/components/Header.tsx b/src/shared/components/Header.tsx index cd50236..b96ad58 100644 --- a/src/shared/components/Header.tsx +++ b/src/shared/components/Header.tsx @@ -1,6 +1,6 @@ import React from "react"; import Button from "./Button"; -import robotLogo from "../../assets/images/logo-robot.png"; +import robotLogo from "../../assets/images/robot-logo.png"; import { BsNewspaper, BsGithub } from "react-icons/bs"; import Whitepaper from "../../assets/Whitepaper.pdf"; type Props = {}; @@ -60,10 +60,10 @@ const Header = (props: Props) => {
-
+
@@ -108,10 +108,10 @@ const Header = (props: Props) => {
-
+
diff --git a/src/shared/components/animated/Introduction.tsx b/src/shared/components/animated/Introduction.tsx new file mode 100644 index 0000000..593745d --- /dev/null +++ b/src/shared/components/animated/Introduction.tsx @@ -0,0 +1,73 @@ +import { useTrail } from "@react-spring/web"; +import React from "react"; +import { + BsDiscord, + BsFacebook, + BsInstagram, + BsTelegram, + BsTwitter, +} from "react-icons/bs"; +import Button from "../Button"; +import Trail from "./Trail"; + +type Props = {}; + +const Introduction = (props: Props) => { + return ( +
+

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

+ +
+

+ Join Our Community +

+
+ + + + + +
+
+
+ ); +}; + +export default Introduction; diff --git a/src/shared/components/animated/Trail.tsx b/src/shared/components/animated/Trail.tsx new file mode 100644 index 0000000..db4f82e --- /dev/null +++ b/src/shared/components/animated/Trail.tsx @@ -0,0 +1,30 @@ +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/FirstSection.tsx b/src/shared/components/home/FirstSection.tsx index b182d60..6aceaae 100644 --- a/src/shared/components/home/FirstSection.tsx +++ b/src/shared/components/home/FirstSection.tsx @@ -11,6 +11,7 @@ import { } from "react-icons/bs"; import { MdContentCopy } from "react-icons/md"; +import { useSprings, useSpring, animated } from "@react-spring/web"; const FirstSection = () => { const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844"; @@ -21,10 +22,16 @@ const FirstSection = () => { const copyToClipboard = (address: string) => { navigator.clipboard.writeText(address); }; + + const springs = useSpring({ + from: { opacity: 0 }, + to: { opacity: 1 }, + }); 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 @@ -48,7 +55,7 @@ const FirstSection = () => {

Join Our Community

-
+
-
+
{
- {/*
*/} -
-
-

{truncateAddress(address)}

- - -
- -
-

{truncateAddress(address)}

- -
-
- Audited By -
-
-
+ ); }; diff --git a/src/shared/components/home/RoadMap.tsx b/src/shared/components/home/RoadMap.tsx index e539771..a6a3fae 100644 --- a/src/shared/components/home/RoadMap.tsx +++ b/src/shared/components/home/RoadMap.tsx @@ -44,12 +44,12 @@ const RoadMap = (props: Props) => {

RoadMap

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

{item.phase} diff --git a/src/shared/components/home/TokenomicsSection.tsx b/src/shared/components/home/TokenomicsSection.tsx index 4de7cc0..aee97db 100644 --- a/src/shared/components/home/TokenomicsSection.tsx +++ b/src/shared/components/home/TokenomicsSection.tsx @@ -53,18 +53,18 @@ const TokenomicsSection = (props: Props) => { Tokenomics

-
-
+
+
-
+
    {tokenomics.map((item, index) => { return (
  • {
    -
    ); }; diff --git a/src/shared/providers/RouterProviderComponent.tsx b/src/shared/providers/RouterProviderComponent.tsx index 9bf7294..b8b88af 100644 --- a/src/shared/providers/RouterProviderComponent.tsx +++ b/src/shared/providers/RouterProviderComponent.tsx @@ -1,4 +1,5 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom"; +import Animated from "../../pages/Animated"; import Home from "../../pages/Home"; import HomeLayout from "../components/layouts/HomeLayout"; @@ -6,7 +7,13 @@ const router = createBrowserRouter([ { path: "/", element: , - children: [{ path: "", element: }], + children: [ + { path: "", element: }, + { + path: "fuck", + element: , + }, + ], }, ]); const RouterProviderComponent = () => {