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> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>SGPT</title> |
||||
<link rel="preconnect" href="https://fonts.googleapis.com" /> |
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
||||
<link |
||||
href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap" |
||||
rel="stylesheet" |
||||
/> |
||||
<link |
||||
href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap" |
||||
rel="stylesheet" |
||||
/> |
||||
</head> |
||||
<body> |
||||
<div id="root"></div> |
||||
<script type="module" src="/src/main.tsx"></script> |
||||
</body> |
||||
</html> |
||||
|
||||
<head> |
||||
<meta charset="UTF-8" /> |
||||
<link rel="icon" type="image/svg+xml" href="/robot-logo.png" /> |
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
||||
<title>SGPT</title> |
||||
<link rel="preconnect" href="https://fonts.googleapis.com" /> |
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> |
||||
<link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap" |
||||
rel="stylesheet" /> |
||||
<link href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700&display=swap" rel="stylesheet" /> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="root"></div> |
||||
<script type="module" src="/src/main.tsx"></script> |
||||
</body> |
||||
|
||||
</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