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.
74 lines
2.3 KiB
74 lines
2.3 KiB
2 years ago
|
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;
|