From e7cc1d132da33cbce6a1bf3f054f22e85d733328 Mon Sep 17 00:00:00 2001 From: Thuong_e Date: Mon, 10 Apr 2023 09:54:27 +0700 Subject: [PATCH] feat: Qna section --- src/shared/components/home/AboutSection.tsx | 128 ++++---- src/shared/components/home/FirstSection.tsx | 260 ++++++++------- src/shared/components/home/QnASection.tsx | 209 ++++++++++-- src/shared/components/home/RoadMap.tsx | 212 +++++++------ .../components/home/TokenomicsSection.tsx | 299 +++++++++++------- src/shared/components/home/text | 26 ++ 6 files changed, 688 insertions(+), 446 deletions(-) create mode 100644 src/shared/components/home/text diff --git a/src/shared/components/home/AboutSection.tsx b/src/shared/components/home/AboutSection.tsx index b491523..2ed52c3 100644 --- a/src/shared/components/home/AboutSection.tsx +++ b/src/shared/components/home/AboutSection.tsx @@ -1,67 +1,73 @@ -import React from 'react' -import aboutImage from '../../../assets/images/robot32.png' -import VideoSGPT from '../../../assets/sgpt.mp4' -import MysteriousText from '../animated/MysteriousText' -type Props = {} +import React, { useState, useEffect } from "react"; +import aboutImage from "../../../assets/images/robot32.png"; +import VideoSGPT from "../../../assets/sgpt.mp4"; +import MysteriousText from "../animated/MysteriousText"; +import TypingText from "../animated/TypingText"; +type Props = {}; const AboutSection = (props: Props) => { - const copyToClipboard = (address: string) => { - navigator.clipboard.writeText(address) - } + const copyToClipboard = (address: string) => { + navigator.clipboard.writeText(address); + }; - return ( -
-
-
-

- What is SGPT? -

-

- - SGPT Token is a complementary token created on the - blockchain platform to provide a platform for small - and medium-sized businesses (SMBs) to create and - manage an internal Q&A system. SGPT Token will be - used to conduct transactions on the platform and - provide benefits to members of the internal Q&A - system. SGPT Token will also be used to reward - members who make positive contributions to the - system. - -

-
+ return ( +
+
+
+

+ What is SGPT? +

+ {/*
+

{typedText}

+
*/} +

+ + SGPT Token is a complementary token created on the blockchain + platform to provide a platform for small and medium-sized + businesses (SMBs) to create and manage an internal Q&A system. + SGPT Token will be used to conduct transactions on the platform + and provide benefits to members of the internal Q&A system. SGPT + Token will also be used to reward members who make positive + contributions to the system. + + {/* + */} +

+
-
-

- SGPT Solution -

-

- - The SGPT Token is a solution to the problems - associated with traditional payment methods for chat - bot services. The token is built on blockchain - technology, which ensures that transactions are - fast, secure, and transparent. Moreover, the use of - the SGPT Token eliminates the need for traditional - payment methods, which are often costly and - inconvenient. - -

-
-
-
- -
+
+

+ SGPT Solution +

+

+ {/*

{typedText}

*/} + + The SGPT Token is a solution to the problems associated with + traditional payment methods for chat bot services. The token is + built on blockchain technology, which ensures that transactions + are fast, secure, and transparent. Moreover, the use of the SGPT + Token eliminates the need for traditional payment methods, which + are often costly and inconvenient. + + {/* + + */} +

- ) -} +
+
+ +
+
+ ); +}; -export default AboutSection +export default AboutSection; diff --git a/src/shared/components/home/FirstSection.tsx b/src/shared/components/home/FirstSection.tsx index 8fdc83c..ec5666a 100644 --- a/src/shared/components/home/FirstSection.tsx +++ b/src/shared/components/home/FirstSection.tsx @@ -1,124 +1,118 @@ -import robotImage from '../../../assets/images/robot-2.png' -import robotImage2 from '../../../assets/images/robot-coin1.png' -import robotBgr from '../../../assets/images/robot-bgr.png' -import VideoSGPTBg from '../../../assets/sgpt-bg.mp4' -import Button from '../Button' +import robotImage from "../../../assets/images/robot-2.png"; +import robotImage2 from "../../../assets/images/robot-coin1.png"; +import robotBgr from "../../../assets/images/robot-bgr.png"; +import VideoSGPTBg from "../../../assets/sgpt-bg.mp4"; +import Button from "../Button"; import { - BsFacebook, - BsDiscord, - BsTwitter, - BsTelegram, - BsInstagram, - BsRocketFill, -} from 'react-icons/bs' -import { IoCopyOutline } from 'react-icons/io5' -import { TbAddressBook } from 'react-icons/tb' -import { useSprings, useSpring, animated } from '@react-spring/web' + BsFacebook, + BsDiscord, + BsTwitter, + BsTelegram, + BsInstagram, + BsRocketFill, +} from "react-icons/bs"; +import { IoCopyOutline } from "react-icons/io5"; +import { TbAddressBook } from "react-icons/tb"; +import { useSprings, useSpring, animated } from "@react-spring/web"; const socials = [ - { - name: 'Telegram', - icon: , - link: 'https://twitter.com/SGPT_SmartAi', - background: 'bg-[#2ca5e0]', - }, - { - name: 'Twitter', - icon: , - link: 'https://twitter.com/SGPT_SmartAi', - background: 'bg-[#1da1f2]', - }, - { - name: 'Discord', - icon: , - link: 'https://discord.com/invite/NNHV8JHBhk', - background: 'bg-[#7289da]', - }, - { - name: 'Facebook', - icon: , - link: 'https://www.facebook.com/SGPTSmartAi', - background: 'bg-[#3b5998]', - }, - { - name: 'Instagram', - icon: , - link: 'https://www.instagram.com/sgpt_smartai/', - background: 'bg-[#e1306c]', - }, -] + { + name: "Telegram", + icon: , + link: "https://twitter.com/SGPT_SmartAi", + background: "bg-[#2ca5e0]", + }, + { + name: "Twitter", + icon: , + link: "https://twitter.com/SGPT_SmartAi", + background: "bg-[#1da1f2]", + }, + { + name: "Discord", + icon: , + link: "https://discord.com/invite/NNHV8JHBhk", + background: "bg-[#7289da]", + }, + { + name: "Facebook", + icon: , + link: "https://www.facebook.com/SGPTSmartAi", + background: "bg-[#3b5998]", + }, + { + name: "Instagram", + icon: , + link: "https://www.instagram.com/sgpt_smartai/", + background: "bg-[#e1306c]", + }, +]; const FirstSection = () => { - const address = '0x3c97331438e90680a17c35905ffc2b8ef760f844' - const truncateAddress = (address: string) => { - return address.slice(0, 5) + '......' + address.slice(-5) - } + const address = "0x3c97331438e90680a17c35905ffc2b8ef760f844"; + const truncateAddress = (address: string) => { + return address.slice(0, 5) + "......" + address.slice(-5); + }; - const copyToClipboard = (address: string) => { - navigator.clipboard.writeText(address) - } + const copyToClipboard = (address: string) => { + navigator.clipboard.writeText(address); + }; - const springs = useSpring({ - from: { opacity: 0 }, - to: { opacity: 1 }, - }) - return ( - +
+
+