You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.6 KiB
85 lines
2.6 KiB
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;
|
|
|