parent
96eb279d11
commit
e577a90e65
|
After Width: | Height: | Size: 318 KiB |
@ -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<IParallax>(null!); |
||||||
|
return ( |
||||||
|
<div className="w-full min-h-screen bg-[#253237]"> |
||||||
|
<Parallax ref={parallax} pages={3}> |
||||||
|
<ParallaxLayer |
||||||
|
offset={1} |
||||||
|
speed={1} |
||||||
|
style={{ backgroundColor: "#805E73" }} |
||||||
|
/> |
||||||
|
<ParallaxLayer |
||||||
|
offset={2} |
||||||
|
speed={1} |
||||||
|
style={{ backgroundColor: "#87BCDE" }} |
||||||
|
/> |
||||||
|
|
||||||
|
<ParallaxLayer |
||||||
|
offset={0} |
||||||
|
speed={0} |
||||||
|
factor={3} |
||||||
|
style={{ |
||||||
|
backgroundImage: url("stars", true), |
||||||
|
backgroundSize: "cover", |
||||||
|
}} |
||||||
|
/> |
||||||
|
|
||||||
|
<ParallaxLayer |
||||||
|
offset={1.3} |
||||||
|
speed={-0.3} |
||||||
|
style={{ pointerEvents: "none" }} |
||||||
|
> |
||||||
|
<img |
||||||
|
src={url("satellite4")} |
||||||
|
style={{ width: "15%", marginLeft: "70%" }} |
||||||
|
/> |
||||||
|
</ParallaxLayer> |
||||||
|
|
||||||
|
<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", |
||||||
|
}} |
||||||
|
> |
||||||
|
<img src={url("earth")} style={{ width: "60%" }} /> |
||||||
|
</ParallaxLayer> |
||||||
|
|
||||||
|
<ParallaxLayer |
||||||
|
offset={2} |
||||||
|
speed={-0.3} |
||||||
|
style={{ |
||||||
|
backgroundSize: "80%", |
||||||
|
backgroundPosition: "center", |
||||||
|
backgroundImage: url("clients", true), |
||||||
|
}} |
||||||
|
/> |
||||||
|
|
||||||
|
{/* section 1 */} |
||||||
|
<ParallaxLayer |
||||||
|
offset={0} |
||||||
|
speed={0.1} |
||||||
|
onScroll={() => parallax.current.scrollTo(1)} |
||||||
|
style={{ |
||||||
|
display: "flex", |
||||||
|
alignItems: "center", |
||||||
|
justifyContent: "center", |
||||||
|
}} |
||||||
|
> |
||||||
|
<Introduction /> |
||||||
|
</ParallaxLayer> |
||||||
|
|
||||||
|
<ParallaxLayer |
||||||
|
offset={1} |
||||||
|
speed={0.1} |
||||||
|
onClick={() => parallax.current.scrollTo(2)} |
||||||
|
style={{ |
||||||
|
display: "flex", |
||||||
|
alignItems: "center", |
||||||
|
justifyContent: "center", |
||||||
|
}} |
||||||
|
> |
||||||
|
<img src={url("bash")} style={{ width: "40%" }} /> |
||||||
|
</ParallaxLayer> |
||||||
|
|
||||||
|
<ParallaxLayer |
||||||
|
offset={2} |
||||||
|
speed={-0} |
||||||
|
style={{ |
||||||
|
display: "flex", |
||||||
|
alignItems: "center", |
||||||
|
justifyContent: "center", |
||||||
|
}} |
||||||
|
onClick={() => parallax.current.scrollTo(0)} |
||||||
|
> |
||||||
|
<img src={url("clients-main")} style={{ width: "40%" }} /> |
||||||
|
</ParallaxLayer> |
||||||
|
</Parallax> |
||||||
|
</div> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Animated; |
||||||
@ -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 ( |
||||||
|
<div className="flex flex-col gap-10 items-center text-white lg:w-3/4 max-w-4xl"> |
||||||
|
<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"> |
||||||
|
<Trail open={true}> |
||||||
|
<span>A digital currency</span> |
||||||
|
<span>payment for SGPT</span> |
||||||
|
<span>chat bot services</span> |
||||||
|
</Trail> |
||||||
|
</h4> |
||||||
|
<p className="w-full font-body text-transparent bg-clip-text bg-gradient-to-r from-sky-400 to-purple-300"> |
||||||
|
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. |
||||||
|
</p> |
||||||
|
|
||||||
|
<div className="flex flex-col justify-center mt-[15vh]"> |
||||||
|
<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,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<Props> = ({ 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 ( |
||||||
|
<div> |
||||||
|
{trail.map(({ height, ...style }, index) => ( |
||||||
|
<a.div key={index} className="will-change-auto" style={style}> |
||||||
|
<a.div style={{ height }}>{items[index]}</a.div> |
||||||
|
</a.div> |
||||||
|
))} |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default Trail; |
||||||
Loading…
Reference in new issue