Compare commits
No commits in common. 'fbba816dbe9c24af9732774eddc6358937e15e1c' and '96eb279d110453ce79ad2ed191d02a168b90afd1' have entirely different histories.
fbba816dbe
...
96eb279d11
@ -1,21 +1,23 @@ |
|||||||
<!DOCTYPE html> |
<!DOCTYPE html> |
||||||
<html lang="en"> |
<html lang="en"> |
||||||
|
<head> |
||||||
<head> |
<meta charset="UTF-8" /> |
||||||
<meta charset="UTF-8" /> |
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||||
<link rel="icon" type="image/svg+xml" href="/robot-logo.png" /> |
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
<title>SGPT</title> |
||||||
<title>SGPT</title> |
<link rel="preconnect" href="https://fonts.googleapis.com" /> |
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" /> |
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
<link |
||||||
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap" |
href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap" |
||||||
rel="stylesheet" /> |
rel="stylesheet" |
||||||
<link href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap" rel="stylesheet" /> |
/> |
||||||
</head> |
<link |
||||||
|
href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap" |
||||||
<body> |
rel="stylesheet" |
||||||
<div id="root"></div> |
/> |
||||||
<script type="module" src="/src/main.tsx"></script> |
</head> |
||||||
</body> |
<body> |
||||||
|
<div id="root"></div> |
||||||
|
<script type="module" src="/src/main.tsx"></script> |
||||||
|
</body> |
||||||
</html> |
</html> |
||||||
|
Before Width: | Height: | Size: 318 KiB |
|
Before Width: | Height: | Size: 318 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
@ -1,228 +0,0 @@ |
|||||||
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) => |
|
||||||
`${ |
|
||||||
wrap ? "url(" : "" |
|
||||||
}https://awv3node-homepage.surge.sh/build/assets/${name}.svg${
|
|
||||||
wrap ? ")" : "" |
|
||||||
}`;
|
|
||||||
|
|
||||||
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={4.2}> |
|
||||||
<ParallaxLayer |
|
||||||
sticky={{ start: 0, end: 4 }} |
|
||||||
style={{ height: "fit-content" }} |
|
||||||
> |
|
||||||
<Header /> |
|
||||||
</ParallaxLayer> |
|
||||||
|
|
||||||
<ParallaxLayer |
|
||||||
offset={1} |
|
||||||
speed={1} |
|
||||||
style={{ backgroundColor: "#133955" }} |
|
||||||
/> |
|
||||||
<ParallaxLayer |
|
||||||
offset={2} |
|
||||||
speed={1} |
|
||||||
style={{ backgroundColor: "#3A7575" }} |
|
||||||
/> |
|
||||||
|
|
||||||
<ParallaxLayer |
|
||||||
offset={0} |
|
||||||
speed={0} |
|
||||||
factor={4} |
|
||||||
style={{ |
|
||||||
backgroundImage: url("stars", true), |
|
||||||
backgroundSize: "cover", |
|
||||||
}} |
|
||||||
/> |
|
||||||
|
|
||||||
<ParallaxLayer offset={1} speed={0.8} style={{ opacity: 0.1 }}> |
|
||||||
<img |
|
||||||
src={url("cloud")} |
|
||||||
style={{ display: "block", width: "20%", marginLeft: "55%" }} |
|
||||||
/> |
|
||||||
<img |
|
||||||
src={url("cloud")} |
|
||||||
style={{ display: "block", width: "10%", marginLeft: "15%" }} |
|
||||||
/> |
|
||||||
</ParallaxLayer> |
|
||||||
|
|
||||||
<ParallaxLayer offset={1.75} speed={0.5} style={{ opacity: 0.1 }}> |
|
||||||
<img |
|
||||||
src={url("cloud")} |
|
||||||
style={{ display: "block", width: "20%", marginLeft: "70%" }} |
|
||||||
/> |
|
||||||
<img |
|
||||||
src={url("cloud")} |
|
||||||
style={{ display: "block", width: "20%", marginLeft: "40%" }} |
|
||||||
/> |
|
||||||
</ParallaxLayer> |
|
||||||
|
|
||||||
<ParallaxLayer offset={1} speed={0.2} style={{ opacity: 0.2 }}> |
|
||||||
<img |
|
||||||
src={url("cloud")} |
|
||||||
style={{ display: "block", width: "10%", marginLeft: "10%" }} |
|
||||||
/> |
|
||||||
<img |
|
||||||
src={url("cloud")} |
|
||||||
style={{ display: "block", width: "20%", marginLeft: "75%" }} |
|
||||||
/> |
|
||||||
</ParallaxLayer> |
|
||||||
|
|
||||||
<ParallaxLayer offset={1.6} speed={-0.1} style={{ opacity: 0.4 }}> |
|
||||||
<img |
|
||||||
src={url("cloud")} |
|
||||||
style={{ display: "block", width: "20%", marginLeft: "60%" }} |
|
||||||
/> |
|
||||||
<img |
|
||||||
src={url("cloud")} |
|
||||||
style={{ display: "block", width: "25%", marginLeft: "30%" }} |
|
||||||
/> |
|
||||||
<img |
|
||||||
src={url("cloud")} |
|
||||||
style={{ display: "block", width: "10%", marginLeft: "80%" }} |
|
||||||
/> |
|
||||||
</ParallaxLayer> |
|
||||||
|
|
||||||
<ParallaxLayer offset={2.6} speed={0.4} style={{ opacity: 0.6 }}> |
|
||||||
<img |
|
||||||
src={url("cloud")} |
|
||||||
style={{ display: "block", width: "20%", marginLeft: "5%" }} |
|
||||||
/> |
|
||||||
<img |
|
||||||
src={url("cloud")} |
|
||||||
style={{ display: "block", width: "15%", marginLeft: "75%" }} |
|
||||||
/> |
|
||||||
</ParallaxLayer> |
|
||||||
|
|
||||||
<ParallaxLayer |
|
||||||
offset={2.5} |
|
||||||
speed={-0.4} |
|
||||||
style={{ |
|
||||||
display: "flex", |
|
||||||
alignItems: "center", |
|
||||||
justifyContent: "center", |
|
||||||
pointerEvents: "none", |
|
||||||
}} |
|
||||||
></ParallaxLayer> |
|
||||||
|
|
||||||
{/* <ParallaxLayer |
|
||||||
offset={2} |
|
||||||
speed={-0.3} |
|
||||||
style={{ |
|
||||||
backgroundSize: "80%", |
|
||||||
backgroundPosition: "center", |
|
||||||
backgroundImage: url("clients", true), |
|
||||||
}} |
|
||||||
/> */} |
|
||||||
|
|
||||||
{/* section 1 */} |
|
||||||
<ParallaxLayer |
|
||||||
offset={0} |
|
||||||
speed={0.1} |
|
||||||
style={{ |
|
||||||
display: "flex", |
|
||||||
alignItems: "center", |
|
||||||
justifyContent: "center", |
|
||||||
}} |
|
||||||
id="section1" |
|
||||||
onClick={() => parallax.current.scrollTo(1)} |
|
||||||
onScroll={(e) => { |
|
||||||
console.log("e", e); |
|
||||||
}} |
|
||||||
> |
|
||||||
<Introduction /> |
|
||||||
</ParallaxLayer> |
|
||||||
|
|
||||||
<ParallaxLayer |
|
||||||
offset={1} |
|
||||||
speed={0.1} |
|
||||||
onClick={() => parallax.current.scrollTo(2)} |
|
||||||
style={{ |
|
||||||
display: "flex", |
|
||||||
alignItems: "center", |
|
||||||
justifyContent: "center", |
|
||||||
}} |
|
||||||
> |
|
||||||
<AboutSection /> |
|
||||||
</ParallaxLayer> |
|
||||||
|
|
||||||
<ParallaxLayer |
|
||||||
offset={2} |
|
||||||
speed={-0} |
|
||||||
style={{ |
|
||||||
display: "flex", |
|
||||||
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)} |
|
||||||
> |
|
||||||
<Footer /> |
|
||||||
</ParallaxLayer> |
|
||||||
</Parallax> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
|
|
||||||
export default Animated; |
|
||||||
@ -1,85 +0,0 @@ |
|||||||
import { useEffect } from "react"; |
|
||||||
import { |
|
||||||
BsDiscord, |
|
||||||
BsFacebook, |
|
||||||
BsInstagram, |
|
||||||
BsTelegram, |
|
||||||
BsTwitter, |
|
||||||
} from "react-icons/bs"; |
|
||||||
import Button from "../Button"; |
|
||||||
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 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"> |
|
||||||
<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"> |
|
||||||
<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] z-50"> |
|
||||||
<h2 className="text-3xl mb-4 font-bold text-center"> |
|
||||||
Join Our Community |
|
||||||
</h2> |
|
||||||
<div className="flex flex-wrap gap-4"> |
|
||||||
<Button bgColor="bg-telegram"> |
|
||||||
<div className="flex items-center gap-2"> |
|
||||||
<BsTelegram size={18} /> |
|
||||||
Telegram |
|
||||||
</div> |
|
||||||
</Button> |
|
||||||
<Button bgColor="bg-discord"> |
|
||||||
<div className="flex items-center gap-2"> |
|
||||||
<BsDiscord size={18} /> |
|
||||||
Discord |
|
||||||
</div> |
|
||||||
</Button> |
|
||||||
<Button bgColor="bg-facebook"> |
|
||||||
<div className="flex items-center gap-2"> |
|
||||||
<BsFacebook size={18} /> |
|
||||||
Facebook |
|
||||||
</div> |
|
||||||
</Button> |
|
||||||
<Button bgColor="bg-twitter"> |
|
||||||
<div className="flex items-center gap-2"> |
|
||||||
<BsTwitter size={18} /> |
|
||||||
Twitter |
|
||||||
</div> |
|
||||||
</Button> |
|
||||||
<Button bgColor="bg-instagram"> |
|
||||||
<div className="flex items-center gap-2"> |
|
||||||
<BsInstagram size={18} /> |
|
||||||
Instagram |
|
||||||
</div> |
|
||||||
</Button> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export default Introduction; |
|
||||||
@ -1,22 +0,0 @@ |
|||||||
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; |
|
||||||
Loading…
Reference in new issue