Thuong_e
2 years ago
parent
abdbb9350e
commit
e7cc1d132d
@ -1,67 +1,73 @@ |
|||||||
import React from 'react' |
import React, { useState, useEffect } from "react"; |
||||||
import aboutImage from '../../../assets/images/robot32.png' |
import aboutImage from "../../../assets/images/robot32.png"; |
||||||
import VideoSGPT from '../../../assets/sgpt.mp4' |
import VideoSGPT from "../../../assets/sgpt.mp4"; |
||||||
import MysteriousText from '../animated/MysteriousText' |
import MysteriousText from "../animated/MysteriousText"; |
||||||
type Props = {} |
import TypingText from "../animated/TypingText"; |
||||||
|
type Props = {}; |
||||||
|
|
||||||
const AboutSection = (props: Props) => { |
const AboutSection = (props: Props) => { |
||||||
const copyToClipboard = (address: string) => { |
const copyToClipboard = (address: string) => { |
||||||
navigator.clipboard.writeText(address) |
navigator.clipboard.writeText(address); |
||||||
} |
}; |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
className="container mx-auto text-white py-2 flex relative" |
className="container mx-auto text-white py-2 lg:flex-row flex-col flex relative " |
||||||
id="about" |
id="about" |
||||||
style={{ |
style={{ |
||||||
backgroundImage: `url(https://awv3node-homepage.surge.sh/build/assets/stars.svg)}`, |
backgroundImage: `url(https://awv3node-homepage.surge.sh/build/assets/stars.svg)}`, |
||||||
}} |
}} |
||||||
> |
> |
||||||
<div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full px-8 pt-2"> |
<div className="flex flex-col justify-center gap-10 lg:w-1/2 w-full px-8 pt-2 order-1"> |
||||||
<div className="flex flex-col gap-8"> |
<div className="flex flex-col gap-8"> |
||||||
<h4 className="text-3xl uppercase font-bold hover:text-orange-400"> |
<h4 className="text-3xl uppercase font-bold hover:text-orange-400"> |
||||||
What is SGPT? |
What is SGPT? |
||||||
</h4> |
</h4> |
||||||
<p className="text-gray-100 md:w-4/5 text-lg"> |
{/* <div> |
||||||
<MysteriousText> |
<h1>{typedText}</h1> |
||||||
SGPT Token is a complementary token created on the |
</div> */} |
||||||
blockchain platform to provide a platform for small |
<p className="text-gray-100 md:w-4/5 text-lg min-h-[255px]"> |
||||||
and medium-sized businesses (SMBs) to create and |
<TypingText> |
||||||
manage an internal Q&A system. SGPT Token will be |
SGPT Token is a complementary token created on the blockchain |
||||||
used to conduct transactions on the platform and |
platform to provide a platform for small and medium-sized |
||||||
provide benefits to members of the internal Q&A |
businesses (SMBs) to create and manage an internal Q&A system. |
||||||
system. SGPT Token will also be used to reward |
SGPT Token will be used to conduct transactions on the platform |
||||||
members who make positive contributions to the |
and provide benefits to members of the internal Q&A system. SGPT |
||||||
system. |
Token will also be used to reward members who make positive |
||||||
</MysteriousText> |
contributions to the system. |
||||||
</p> |
</TypingText> |
||||||
</div> |
{/* <MysteriousText> |
||||||
|
</MysteriousText> */} |
||||||
|
</p> |
||||||
|
</div> |
||||||
|
|
||||||
|
<div className="flex flex-col gap-4"> |
||||||
|
<h4 className="text-3xl uppercase font-bold hover:text-orange-400"> |
||||||
|
SGPT Solution |
||||||
|
</h4> |
||||||
|
<p className="text-gray-100 md:w-4/5 text-lg min-h-[225px]"> |
||||||
|
{/* <h1>{typedText}</h1> */} |
||||||
|
<TypingText> |
||||||
|
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. |
||||||
|
</TypingText> |
||||||
|
{/* <MysteriousText> |
||||||
|
|
||||||
<div className="flex flex-col gap-4"> |
</MysteriousText> */} |
||||||
<h4 className="text-3xl uppercase font-bold hover:text-orange-400"> |
</p> |
||||||
SGPT Solution |
|
||||||
</h4> |
|
||||||
<p className="text-gray-100 md:w-4/5 text-lg"> |
|
||||||
<MysteriousText> |
|
||||||
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. |
|
||||||
</MysteriousText> |
|
||||||
</p> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
<div className="md:w-1/2 md:flex hidden justify-center items-center"> |
|
||||||
<video controls className="rounded-md" muted autoPlay> |
|
||||||
<source src={VideoSGPT} type="video/mp4" /> |
|
||||||
</video> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
) |
</div> |
||||||
} |
<div className="lg:w-1/2 md:flex hidden justify-center items-center h-[660px] lg:order-1 w-full"> |
||||||
|
<video controls className="rounded-md" muted autoPlay> |
||||||
|
<source src={VideoSGPT} type="video/mp4" /> |
||||||
|
</video> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
export default AboutSection |
export default AboutSection; |
||||||
|
|||||||
@ -1,28 +1,187 @@ |
|||||||
import { useSpring, animated } from '@react-spring/web' |
import { useSpring, animated } from "@react-spring/web"; |
||||||
import React, { useEffect, useRef, useState } from 'react' |
import React, { useEffect, useRef, useState } from "react"; |
||||||
import { VscDebugBreakpointLog } from 'react-icons/vsc' |
import { |
||||||
|
VscArrowDown, |
||||||
type Props = {} |
VscChevronDown, |
||||||
|
VscDebugBreakpointLog, |
||||||
|
VscDiffAdded, |
||||||
|
} from "react-icons/vsc"; |
||||||
|
import "../animated/QnASection.css"; |
||||||
|
type Props = {}; |
||||||
|
|
||||||
const QnASection = (props: Props) => { |
const QnASection = (props: Props) => { |
||||||
return ( |
const listQnA = [ |
||||||
<div |
{ |
||||||
className="container flex justify-between items-center mx-auto py-2 text-white" |
id: 1, |
||||||
id="qna" |
title: "Abc", |
||||||
> |
bgcolor: "bg-[#CC99FF]", |
||||||
<div> |
contents: [ |
||||||
<h1 className="text-4xl font-bold text-center hover:text-orange-400"> |
{ |
||||||
FAQS |
id: 1, |
||||||
</h1> |
content: "12sdfsd3", |
||||||
<h2> |
bgcolor: "bg-[#9999FF]", |
||||||
See some of the most frequently asked questions about Fight |
}, |
||||||
{/* Out here. Got a question that’s not on the list? Let us know |
{ |
||||||
|
id: 2, |
||||||
|
content: "123ádsa", |
||||||
|
bgcolor: "bg-[#6699FF]", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
content: "123ádas", |
||||||
|
bgcolor: "bg-[#3399FF]", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
content: "123ádasd", |
||||||
|
bgcolor: "bg-[#0099FF]", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
title: "Abcd", |
||||||
|
bgcolor: "bg-[#CC66FF]", |
||||||
|
|
||||||
|
contents: [ |
||||||
|
{ |
||||||
|
id: 1, |
||||||
|
bgcolor: "bg-[#9966FF]", |
||||||
|
content: "ádasffjk12", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 2, |
||||||
|
bgcolor: "bg-[#6666FF]", |
||||||
|
content: "ádasffj1k", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 3, |
||||||
|
bgcolor: "bg-[#3366FF]", |
||||||
|
content: "ádasffj12k", |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: 4, |
||||||
|
bgcolor: "bg-[#0066FF]", |
||||||
|
content: "ádasffj123k", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
]; |
||||||
|
const showListItem = (id: string) => { |
||||||
|
const element = document.getElementById(`${id}`); |
||||||
|
// const ulhidden = document.querySelector(`#${id} ul`);
|
||||||
|
const ulhidden = document.querySelector(`#${id}>ul`); |
||||||
|
console.log(ulhidden); |
||||||
|
ulhidden?.classList.toggle("hidden"); |
||||||
|
ulhidden?.classList.toggle("flex"); |
||||||
|
}; |
||||||
|
const [isVisible, setIsVisible] = useState(false); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
const section = document.querySelector("#qna"); |
||||||
|
const observer = new IntersectionObserver( |
||||||
|
([entry]) => { |
||||||
|
setIsVisible(entry.isIntersecting); |
||||||
|
}, |
||||||
|
{ threshold: 0.5 } |
||||||
|
); |
||||||
|
|
||||||
|
if (!section) { |
||||||
|
return; |
||||||
|
} |
||||||
|
observer.observe(section); |
||||||
|
|
||||||
|
return () => { |
||||||
|
observer.unobserve(section); |
||||||
|
}; |
||||||
|
}, []); |
||||||
|
|
||||||
|
useEffect(() => { |
||||||
|
console.log("isVisible", isVisible); |
||||||
|
}, [isVisible]); |
||||||
|
|
||||||
|
const styles = useSpring({ |
||||||
|
opacity: isVisible ? 1 : 0, |
||||||
|
from: { |
||||||
|
opacity: 0, |
||||||
|
}, |
||||||
|
to: { |
||||||
|
opacity: isVisible ? 1 : 0, |
||||||
|
}, |
||||||
|
|
||||||
|
config: { |
||||||
|
duration: 1000, |
||||||
|
}, |
||||||
|
}); |
||||||
|
|
||||||
|
return ( |
||||||
|
<div |
||||||
|
className="container min-h-[400px] mb-[100px] flex flex-wrap lg:justify-between justify-center items-start mx-auto py-2 text-white " |
||||||
|
id="qna" |
||||||
|
> |
||||||
|
<div className="w-full lg:w-[50%]"> |
||||||
|
<h1 className="text-4xl font-bold text-center hover:text-orange-400"> |
||||||
|
FAQS |
||||||
|
</h1> |
||||||
|
<h2 className="text-center "> |
||||||
|
See some of the most frequently asked questions about Fight |
||||||
|
{/* Out here. Got a question that’s not on the list? Let us know |
||||||
below! */} |
below! */} |
||||||
</h2> |
</h2> |
||||||
</div> |
</div> |
||||||
<div>ABC</div> |
|
||||||
</div> |
<animated.div |
||||||
) |
className="w-1/2 flex justify-end overflow-hidden" |
||||||
} |
style={{ |
||||||
|
...styles, |
||||||
export default QnASection |
}} |
||||||
|
> |
||||||
|
<ul className="flex flex-col items-center gap-4 lg:w-3/4 w-full "> |
||||||
|
{listQnA.map((item, index) => { |
||||||
|
return ( |
||||||
|
<li |
||||||
|
id={item.title} |
||||||
|
key={item.id} |
||||||
|
className="w-full items-center flex flex-col pl-3 pr-3 " |
||||||
|
> |
||||||
|
<div className="w-full h-[52px] flex justify-between items-center bg-slate-200 pl-3 pr-3 z-10 relative "> |
||||||
|
<div |
||||||
|
className={`absolute h-full left-0 top-0 w-2 ${item.bgcolor}`} |
||||||
|
></div> |
||||||
|
<span className="text-xl font-bold text-gray-700"> |
||||||
|
{item.title} |
||||||
|
</span> |
||||||
|
<div |
||||||
|
className="listQnA h-6 w-6 flex cursor-pointer " |
||||||
|
onClick={() => showListItem(item.title)} |
||||||
|
> |
||||||
|
<VscChevronDown className="hover:text-2xl m-auto text-gray-700" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<ul className="hidden ul-hidden flex-col gap-y-0.5 pt-1 pl-0.5 w-full list-answer animate-[listShowdown_0.75s_ease] animate-[listHidden_0.75s_ease]"> |
||||||
|
{item.contents.map((list, index) => { |
||||||
|
return ( |
||||||
|
<li |
||||||
|
key={list.id} |
||||||
|
className=" w-full h-10 flex items-center border-t-2 border-gray-400 pl-3 pr-3 bg-slate-200 relative" |
||||||
|
> |
||||||
|
<div |
||||||
|
className={`absolute h-full left-0 top-0 w-2 ${list.bgcolor}`} |
||||||
|
></div> |
||||||
|
<span className="text-lg font-bold text-gray-700"> |
||||||
|
{list.content} |
||||||
|
</span> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ul> |
||||||
|
</animated.div> |
||||||
|
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default QnASection; |
||||||
|
|||||||
@ -1,120 +1,124 @@ |
|||||||
import { useSpring, animated } from '@react-spring/web' |
import { useSpring, animated } from "@react-spring/web"; |
||||||
import React, { useEffect, useRef, useState } from 'react' |
import React, { useEffect, useRef, useState } from "react"; |
||||||
import { VscDebugBreakpointLog } from 'react-icons/vsc' |
import { VscDebugBreakpointLog } from "react-icons/vsc"; |
||||||
|
type Props = {}; |
||||||
type Props = {} |
|
||||||
|
|
||||||
const roadMapData = [ |
const roadMapData = [ |
||||||
{ |
{ |
||||||
phase: 'Phase 1', |
phase: "Phase 1", |
||||||
listTitle: [ |
listTitle: [ |
||||||
'Development of CEO Ideology', |
"Development of CEO Ideology", |
||||||
'Website Development and Release', |
"Website Development and Release", |
||||||
'Whitepaper Launch', |
"Whitepaper Launch", |
||||||
'Subscription Presale', |
"Subscription Presale", |
||||||
'Marketing Partners Advisory Board Formed', |
"Marketing Partners Advisory Board Formed", |
||||||
], |
], |
||||||
}, |
}, |
||||||
|
|
||||||
{ |
{ |
||||||
phase: 'Phase 2', |
phase: "Phase 2", |
||||||
listTitle: [ |
listTitle: [ |
||||||
'CEO DEX Token Launch', |
"CEO DEX Token Launch", |
||||||
'Massive Marketing Campaign', |
"Massive Marketing Campaign", |
||||||
'Real Time Suprise Buybacks', |
"Real Time Suprise Buybacks", |
||||||
'NFT Staking and APR Staking Launch', |
"NFT Staking and APR Staking Launch", |
||||||
'5 Million Marketcap Milestone CoinGecko Listing', |
"5 Million Marketcap Milestone CoinGecko Listing", |
||||||
], |
], |
||||||
}, |
}, |
||||||
|
|
||||||
{ |
{ |
||||||
phase: 'Phase 3', |
phase: "Phase 3", |
||||||
listTitle: [ |
listTitle: [ |
||||||
'Swap Development and Launch', |
"Swap Development and Launch", |
||||||
'Merchandise Launch', |
"Merchandise Launch", |
||||||
'Tier 1 CEX Listings', |
"Tier 1 CEX Listings", |
||||||
'CEO Bridge to ETH, Arbitrium and Polygon', |
"CEO Bridge to ETH, Arbitrium and Polygon", |
||||||
'10 Million MarketCap Milestone', |
"10 Million MarketCap Milestone", |
||||||
'CEOAI Bot Creator and integration with AI.', |
"CEOAI Bot Creator and integration with AI.", |
||||||
], |
], |
||||||
}, |
}, |
||||||
] |
]; |
||||||
|
|
||||||
const RoadMap = (props: Props) => { |
const RoadMap = (props: Props) => { |
||||||
const [isVisible, setIsVisible] = useState(false) |
const [isVisible, setIsVisible] = useState(false); |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
const section = document.querySelector('.animate-on-scroll') |
const section = document.querySelector(".animate-on-scroll"); |
||||||
const observer = new IntersectionObserver( |
const observer = new IntersectionObserver( |
||||||
([entry]) => { |
([entry]) => { |
||||||
setIsVisible(entry.isIntersecting) |
setIsVisible(entry.isIntersecting); |
||||||
}, |
}, |
||||||
{ threshold: 0.5 } |
{ threshold: 0.5 } |
||||||
) |
); |
||||||
|
|
||||||
if (!section) { |
if (!section) { |
||||||
return |
return; |
||||||
} |
} |
||||||
observer.observe(section) |
observer.observe(section); |
||||||
|
|
||||||
return () => { |
return () => { |
||||||
observer.unobserve(section) |
observer.unobserve(section); |
||||||
} |
}; |
||||||
}, []) |
}, []); |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
console.log('isVisible', isVisible) |
console.log("isVisible", isVisible); |
||||||
}, [isVisible]) |
}, [isVisible]); |
||||||
|
|
||||||
const styles = useSpring({ |
const styles = useSpring({ |
||||||
opacity: isVisible ? 1 : 0, |
opacity: isVisible ? 1 : 0, |
||||||
transform: isVisible ? 'translateY(0)' : 'translateY(100px)', |
transform: isVisible ? "translateX(0)" : "translateX(100px)", |
||||||
config: { |
config: { |
||||||
duration: 500, |
duration: 500, |
||||||
}, |
}, |
||||||
}) |
}); |
||||||
|
|
||||||
return ( |
return ( |
||||||
<div |
<div |
||||||
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20" |
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20 relative" |
||||||
id="roadmap" |
id="roadmap" |
||||||
> |
> |
||||||
<h1 className="text-4xl font-bold text-center hover:text-orange-400"> |
<div className="absolute top-[150px] left-[50%] w-2 h-[80%] bg-gradient-to-b from-violet-500 to-fuchsia-500"></div> |
||||||
Road Map |
<h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20"> |
||||||
</h1> |
Road Map |
||||||
|
</h1> |
||||||
|
{/* <div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0"> */} |
||||||
|
<animated.div style={styles}> |
||||||
|
{roadMapData.map((item, index) => { |
||||||
|
return ( |
||||||
|
<div |
||||||
|
key={index} |
||||||
|
className="relative roadmapphase w-1/2 bg-white text-black rounded-lg [&:nth-child(odd)>div]:right-[-25%] [&:nth-child(odd)]:float-left [&:nth-child(odd)]:clear-right [&:nth-child(odd)]:translate-x-[-30px] [&:nth-child(even)]:float-right [&:nth-child(even)]:clear-left [&:nth-child(even)]:translate-x-12" |
||||||
|
> |
||||||
|
<div className="absolute h-[30px] w-[30px] rounded-[50%] bg-gradient-to-b from-violet-500 to-fuchsia-500"></div> |
||||||
|
|
||||||
<div className="flex flex-col lg:flex-row gap-10 mt-20 justify-center px-10 lg:px-0"> |
<h4 className="timeline-title p-2 text-[28px] text-[#6a06ec] font-medium"> |
||||||
{roadMapData.map((item, index) => { |
{item.phase} |
||||||
return ( |
</h4> |
||||||
<animated.div |
<ol className="flex flex-col gap-2"> |
||||||
key={index} |
{item.listTitle.map((listItem, index) => { |
||||||
className="lg:w-1/4 bg-orange-400 rounded-lg min-h-[250px] p-5" |
return ( |
||||||
style={styles} |
<li |
||||||
> |
key={index} |
||||||
<h4 className="text-center text-3xl text-gray-100 font-semibold mb-6"> |
className="flex items-center gap-3 p-2 text-lg" |
||||||
{item.phase} |
> |
||||||
</h4> |
<VscDebugBreakpointLog |
||||||
<ol className="flex flex-col gap-2"> |
style={{ |
||||||
{item.listTitle.map((listItem, index) => { |
color: "#B051F2", |
||||||
return ( |
}} |
||||||
<li |
/> |
||||||
key={index} |
<p className="font-medium font-body">{listItem}</p> |
||||||
className="flex items-center gap-3" |
</li> |
||||||
> |
); |
||||||
<VscDebugBreakpointLog width={18} /> |
|
||||||
<p className="font-medium font-body"> |
|
||||||
{listItem} |
|
||||||
</p> |
|
||||||
</li> |
|
||||||
) |
|
||||||
})} |
|
||||||
</ol> |
|
||||||
</animated.div> |
|
||||||
) |
|
||||||
})} |
})} |
||||||
|
</ol> |
||||||
</div> |
</div> |
||||||
</div> |
); |
||||||
) |
})} |
||||||
} |
</animated.div> |
||||||
|
</div> |
||||||
|
// </div>
|
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
export default RoadMap |
export default RoadMap; |
||||||
|
|||||||
@ -1,138 +1,191 @@ |
|||||||
import { useSpring, animated } from '@react-spring/web' |
import { useSpring, animated } from "@react-spring/web"; |
||||||
import { useEffect, useState } from 'react' |
import { useEffect, useState } from "react"; |
||||||
import tokenomicChart from '../../../assets/images/tokenomic-chart.png' |
import tokenomicChart from "../../../assets/images/tokenomic-chart.png"; |
||||||
|
import { Pie } from "react-chartjs-2"; |
||||||
type Props = {} |
import "chart.js/auto"; |
||||||
|
type Props = {}; |
||||||
|
|
||||||
const tokenomics = [ |
const tokenomics = [ |
||||||
{ |
{ |
||||||
title: 'Liquidity - 5% 1,000,000 SGPT', |
title: "Liquidity - 5% 1,000,000 SGPT", |
||||||
description: ' ', |
precent: "5", |
||||||
color: 'bg-[#86eae9]', |
description: " ", |
||||||
}, |
color: "#86eae9", |
||||||
{ |
bgcolor: "bg-[#86eae9]", |
||||||
title: 'Private Sale - 17% 3,400,000 SGPT', |
}, |
||||||
description: ' ', |
{ |
||||||
color: 'bg-[#5dbdd3]', |
title: "Private Sale - 17% 3,400,000 SGPT", |
||||||
}, |
description: " ", |
||||||
{ |
precent: "17", |
||||||
title: 'Stacking & Farming - 15% 3,000,000 SGPT', |
color: "#5dbdd3", |
||||||
description: ' ', |
bgcolor: "bg-[#5dbdd3]", |
||||||
color: 'bg-[#4591b8]', |
}, |
||||||
}, |
{ |
||||||
{ |
title: "Stacking & Farming - 15% 3,000,000 SGPT", |
||||||
title: 'Marketing & Promotion - 15% 3,000,000 SGPT', |
description: " ", |
||||||
description: ' ', |
precent: "15", |
||||||
color: 'bg-[#3b6696]', |
color: "#4591b8", |
||||||
}, |
bgcolor: "bg-[#4591b8]", |
||||||
{ |
}, |
||||||
title: 'Public Sale - 14% 2,800,000 SGPT', |
{ |
||||||
description: ' ', |
title: "Marketing & Promotion - 15% 3,000,000 SGPT", |
||||||
color: 'bg-[#353c6e]', |
description: " ", |
||||||
}, |
precent: "15", |
||||||
{ |
color: "#3b6696", |
||||||
title: 'Reward & Q&A - 10% 2,000,000 SGPT', |
bgcolor: "bg-[#3b6696]", |
||||||
description: ' ', |
}, |
||||||
color: 'bg-[#705788]', |
{ |
||||||
}, |
title: "Public Sale - 14% 2,800,000 SGPT", |
||||||
{ |
description: " ", |
||||||
title: 'Advisor - 10% 2,000,000 SGPT', |
precent: "14", |
||||||
description: ' ', |
color: "#353c6e", |
||||||
color: 'bg-[#a5769e]', |
bgcolor: "bg-[#353c6e]", |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
title: 'Treasury - 14% 2,800,000 SGPT', |
title: "Reward & Q&A - 10% 2,000,000 SGPT", |
||||||
description: ' ', |
description: " ", |
||||||
color: 'bg-[#d59ab3]', |
precent: "10", |
||||||
}, |
color: "#705788", |
||||||
] |
bgcolor: "bg-[#705788]", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "Advisor - 10% 2,000,000 SGPT", |
||||||
|
description: " ", |
||||||
|
precent: "10", |
||||||
|
color: "#a5769e", |
||||||
|
bgcolor: "bg-[#a5769e]", |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: "Treasury - 14% 2,800,000 SGPT", |
||||||
|
description: " ", |
||||||
|
precent: "14", |
||||||
|
color: "#d59ab3", |
||||||
|
bgcolor: "bg-[#d59ab3]", |
||||||
|
}, |
||||||
|
]; |
||||||
|
|
||||||
const TokenomicsSection = (props: Props) => { |
const TokenomicsSection = (props: Props) => { |
||||||
const [isVisible, setIsVisible] = useState(true) |
const [isVisible, setIsVisible] = useState(false); |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
const section = document.querySelector('#tokenomics') |
const section = document.getElementById("tokenomics"); |
||||||
const observer = new IntersectionObserver( |
const observer = new IntersectionObserver( |
||||||
([entry]) => { |
([entry]) => { |
||||||
setIsVisible(entry.isIntersecting) |
setIsVisible(entry.isIntersecting); |
||||||
}, |
}, |
||||||
{ threshold: 0.5 } |
{ threshold: 0.5 } |
||||||
) |
); |
||||||
|
|
||||||
if (!section) { |
if (!section) { |
||||||
return |
return; |
||||||
} |
} |
||||||
observer.observe(section) |
observer.observe(section); |
||||||
|
|
||||||
return () => { |
return () => { |
||||||
observer.unobserve(section) |
observer.unobserve(section); |
||||||
} |
}; |
||||||
}, []) |
}, []); |
||||||
|
|
||||||
useEffect(() => { |
useEffect(() => { |
||||||
console.log('isVisible', isVisible) |
console.log("isVisible", isVisible); |
||||||
}, [isVisible]) |
}, [isVisible]); |
||||||
|
|
||||||
const styles = useSpring({ |
const styles = useSpring({ |
||||||
opacity: isVisible ? 1 : 0, |
opacity: isVisible ? 1 : 0, |
||||||
from: { |
transform: isVisible ? "translateY(0)" : "translateY(100px)", |
||||||
opacity: 0, |
config: { |
||||||
transform: 'translateY(100px)', |
duration: 500, |
||||||
}, |
}, |
||||||
to: { |
}); |
||||||
opacity: isVisible ? 1 : 0, |
|
||||||
transform: 'translateY(0px)', |
|
||||||
}, |
|
||||||
|
|
||||||
config: { |
const textCenter = { |
||||||
duration: 500, |
id: "textCenter", |
||||||
|
beforeDatasetsDraw(chart: any, arg: any, pluginsOptions: any) { |
||||||
|
const { ctx, data } = chart; |
||||||
|
ctx.save(); |
||||||
|
ctx.fillStyle = "#fff"; |
||||||
|
ctx.font = "bolder 30px sen"; |
||||||
|
ctx.textAlign = "center"; |
||||||
|
ctx.textBaseline = "middle"; |
||||||
|
ctx.fillText( |
||||||
|
`TOTAL SUPPLE`, |
||||||
|
chart.getDatasetMeta(0).data[0].x, |
||||||
|
chart.getDatasetMeta(0).data[0].y - 20 |
||||||
|
); |
||||||
|
ctx.fillText( |
||||||
|
`20,000,000 SGPT`, |
||||||
|
chart.getDatasetMeta(0).data[0].x, |
||||||
|
chart.getDatasetMeta(0).data[0].y + 25 |
||||||
|
); |
||||||
|
}, |
||||||
|
}; |
||||||
|
const [userData, setUserData] = useState({ |
||||||
|
labels: tokenomics.map((data) => data.title), |
||||||
|
datasets: [ |
||||||
|
{ |
||||||
|
// label: "text",
|
||||||
|
data: tokenomics.map((data) => data.precent), |
||||||
|
backgroundColor: tokenomics.map((data) => data.color), |
||||||
|
// cutout: "10%",
|
||||||
|
borderWidth: 2, |
||||||
|
delay: 100, |
||||||
|
}, |
||||||
|
], |
||||||
|
}); |
||||||
|
const labelText = { |
||||||
|
hoverBorderWidth: 4, |
||||||
|
plugins: { |
||||||
|
legend: { |
||||||
|
display: false, |
||||||
|
}, |
||||||
|
tooltip: { |
||||||
|
callbacks: { |
||||||
|
label: (context: any) => { |
||||||
|
return ` ${context.label}`; |
||||||
|
}, |
||||||
}, |
}, |
||||||
}) |
}, |
||||||
return ( |
}, |
||||||
<div className="w-full pb-24" id="tokenomics"> |
}; |
||||||
<div className="container mx-auto"> |
|
||||||
<h1 className="text-4xl text-white font-bold text-center mb-20"> |
|
||||||
Tokenomics |
|
||||||
</h1> |
|
||||||
|
|
||||||
<div className="w-full flex flex-col gap-4 lg:flex-row"> |
return ( |
||||||
<div className="lg:w-1/2 flex justify-center"> |
<div className="w-full pb-24" id="tokenomics"> |
||||||
<img |
<div className="container mx-auto"> |
||||||
src={tokenomicChart} |
<h1 className="text-4xl text-white font-bold text-center mb-20"> |
||||||
alt="" |
Tokenomics |
||||||
className="rounded-3xl w-[80%]" |
</h1> |
||||||
/> |
<div className="w-full flex justify-center items-center lg:justify-between flex-col gap-y-12 gap-x-4 lg:flex-row"> |
||||||
</div> |
<div className="w-full lg:w-1/2 flex justify-center"> |
||||||
|
<animated.div style={{ width: "500px", ...styles }}> |
||||||
|
<Pie data={userData} plugins={[textCenter]} options={labelText} /> |
||||||
|
</animated.div> |
||||||
|
</div> |
||||||
|
|
||||||
<div className="lg:w-1/2"> |
<div className="w-full justify-center"> |
||||||
<ul className="flex flex-col items-end justify-center h-full gap-3 px-3 max-sm:pt-10 cursor-pointer"> |
<ul className="flex flex-col items-end justify-center h-full gap-3 px-3 max-sm:pt-10 cursor-pointer"> |
||||||
{tokenomics.map((item, index) => { |
{tokenomics.map((item, index) => { |
||||||
return ( |
return ( |
||||||
<animated.li |
<animated.li |
||||||
key={index} |
key={index} |
||||||
className={`text-center w-full lg:w-2/3 bg-slate-200 py-3 relative`} |
className={`text-center w-full lg:w-3/4 bg-slate-200 py-3 relative`} |
||||||
style={{ |
style={styles} |
||||||
...styles, |
> |
||||||
}} |
<div |
||||||
> |
className={`absolute h-full top-0 w-2 ${item.bgcolor}`} |
||||||
<div |
></div> |
||||||
className={`absolute h-full top-0 w-2 ${item.color}`} |
<h4 className="text-xl font-bold text-gray-700"> |
||||||
></div> |
{item.title} |
||||||
<h4 className="text-xl font-bold text-gray-700"> |
</h4> |
||||||
{item.title} |
<p className="text-gray-500">{item.description}</p> |
||||||
</h4> |
</animated.li> |
||||||
<p className="text-gray-500"> |
); |
||||||
{item.description} |
})} |
||||||
</p> |
</ul> |
||||||
</animated.li> |
</div> |
||||||
) |
|
||||||
})} |
|
||||||
</ul> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
|
||||||
</div> |
</div> |
||||||
) |
</div> |
||||||
} |
</div> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
export default TokenomicsSection |
export default TokenomicsSection; |
||||||
|
|||||||
@ -0,0 +1,26 @@ |
|||||||
|
<div> |
||||||
|
<div className="timeline"> |
||||||
|
<div className="timeline-container primary"> |
||||||
|
<div className="timeline-icon"> |
||||||
|
{index + 1} |
||||||
|
{/* <i className="far fa-grin-wink"></i> */} |
||||||
|
</div> |
||||||
|
<div className="timeline-body"> |
||||||
|
<h4 className="timeline-title">{item.phase}</h4> |
||||||
|
<ol className="flex flex-col gap-2"> |
||||||
|
{item.listTitle.map((listItem, index) => { |
||||||
|
return ( |
||||||
|
<li |
||||||
|
key={index} |
||||||
|
className="flex items-center gap-3 text-lg" |
||||||
|
> |
||||||
|
<VscDebugBreakpointLog /> |
||||||
|
<p className="font-medium font-body">{listItem}</p> |
||||||
|
</li> |
||||||
|
); |
||||||
|
})} |
||||||
|
</ol> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
Loading…
Reference in new issue