Compare commits
3 Commits
96eb279d11
...
fbba816dbe
| Author | SHA1 | Date |
|---|---|---|
 tuanpep
|
fbba816dbe | 2 years ago |
|
tuanpep
|
421e53fd20 | 2 years ago |
|
tuanpep
|
e577a90e65 | 2 years ago |
@ -1,23 +1,21 @@ |
|||||||
<!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" /> |
||||||
/> |
|
||||||
<link |
|
||||||
href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap" |
|
||||||
rel="stylesheet" |
|
||||||
/> |
|
||||||
</head> |
</head> |
||||||
|
|
||||||
<body> |
<body> |
||||||
<div id="root"></div> |
<div id="root"></div> |
||||||
<script type="module" src="/src/main.tsx"></script> |
<script type="module" src="/src/main.tsx"></script> |
||||||
</body> |
</body> |
||||||
|
|
||||||
</html> |
</html> |
||||||
|
After Width: | Height: | Size: 318 KiB |
|
After Width: | Height: | Size: 318 KiB |
|
Before Width: | Height: | Size: 4.0 KiB |
@ -0,0 +1,228 @@ |
|||||||
|
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; |
||||||
@ -0,0 +1,85 @@ |
|||||||
|
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; |
||||||
@ -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; |
||||||
Loading…
Reference in new issue