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