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.
SGPT/src/shared/components/animated/Introduction.tsx

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;