Thuong_e
2 years ago
parent
abdbb9350e
commit
e7cc1d132d
@ -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 ( |
||||
<div |
||||
className="container mx-auto text-white py-2 flex relative" |
||||
id="about" |
||||
style={{ |
||||
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 gap-8"> |
||||
<h4 className="text-3xl uppercase font-bold hover:text-orange-400"> |
||||
What is SGPT? |
||||
</h4> |
||||
<p className="text-gray-100 md:w-4/5 text-lg"> |
||||
<MysteriousText> |
||||
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. |
||||
</MysteriousText> |
||||
</p> |
||||
</div> |
||||
return ( |
||||
<div |
||||
className="container mx-auto text-white py-2 lg:flex-row flex-col flex relative " |
||||
id="about" |
||||
style={{ |
||||
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 order-1"> |
||||
<div className="flex flex-col gap-8"> |
||||
<h4 className="text-3xl uppercase font-bold hover:text-orange-400"> |
||||
What is SGPT? |
||||
</h4> |
||||
{/* <div> |
||||
<h1>{typedText}</h1> |
||||
</div> */} |
||||
<p className="text-gray-100 md:w-4/5 text-lg min-h-[255px]"> |
||||
<TypingText> |
||||
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. |
||||
</TypingText> |
||||
{/* <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"> |
||||
<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 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> |
||||
|
||||
</MysteriousText> */} |
||||
</p> |
||||
</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 React, { useEffect, useRef, useState } from 'react' |
||||
import { VscDebugBreakpointLog } from 'react-icons/vsc' |
||||
|
||||
type Props = {} |
||||
import { useSpring, animated } from "@react-spring/web"; |
||||
import React, { useEffect, useRef, useState } from "react"; |
||||
import { |
||||
VscArrowDown, |
||||
VscChevronDown, |
||||
VscDebugBreakpointLog, |
||||
VscDiffAdded, |
||||
} from "react-icons/vsc"; |
||||
import "../animated/QnASection.css"; |
||||
type Props = {}; |
||||
|
||||
const QnASection = (props: Props) => { |
||||
return ( |
||||
<div |
||||
className="container flex justify-between items-center mx-auto py-2 text-white" |
||||
id="qna" |
||||
> |
||||
<div> |
||||
<h1 className="text-4xl font-bold text-center hover:text-orange-400"> |
||||
FAQS |
||||
</h1> |
||||
<h2> |
||||
See some of the most frequently asked questions about Fight |
||||
{/* Out here. Got a question that’s not on the list? Let us know |
||||
const listQnA = [ |
||||
{ |
||||
id: 1, |
||||
title: "Abc", |
||||
bgcolor: "bg-[#CC99FF]", |
||||
contents: [ |
||||
{ |
||||
id: 1, |
||||
content: "12sdfsd3", |
||||
bgcolor: "bg-[#9999FF]", |
||||
}, |
||||
{ |
||||
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! */} |
||||
</h2> |
||||
</div> |
||||
<div>ABC</div> |
||||
</div> |
||||
) |
||||
} |
||||
|
||||
export default QnASection |
||||
</h2> |
||||
</div> |
||||
|
||||
<animated.div |
||||
className="w-1/2 flex justify-end overflow-hidden" |
||||
style={{ |
||||
...styles, |
||||
}} |
||||
> |
||||
<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 React, { useEffect, useRef, useState } from 'react' |
||||
import { VscDebugBreakpointLog } from 'react-icons/vsc' |
||||
|
||||
type Props = {} |
||||
import { useSpring, animated } from "@react-spring/web"; |
||||
import React, { useEffect, useRef, useState } from "react"; |
||||
import { VscDebugBreakpointLog } from "react-icons/vsc"; |
||||
type Props = {}; |
||||
|
||||
const roadMapData = [ |
||||
{ |
||||
phase: 'Phase 1', |
||||
listTitle: [ |
||||
'Development of CEO Ideology', |
||||
'Website Development and Release', |
||||
'Whitepaper Launch', |
||||
'Subscription Presale', |
||||
'Marketing Partners Advisory Board Formed', |
||||
], |
||||
}, |
||||
{ |
||||
phase: "Phase 1", |
||||
listTitle: [ |
||||
"Development of CEO Ideology", |
||||
"Website Development and Release", |
||||
"Whitepaper Launch", |
||||
"Subscription Presale", |
||||
"Marketing Partners Advisory Board Formed", |
||||
], |
||||
}, |
||||
|
||||
{ |
||||
phase: 'Phase 2', |
||||
listTitle: [ |
||||
'CEO DEX Token Launch', |
||||
'Massive Marketing Campaign', |
||||
'Real Time Suprise Buybacks', |
||||
'NFT Staking and APR Staking Launch', |
||||
'5 Million Marketcap Milestone CoinGecko Listing', |
||||
], |
||||
}, |
||||
{ |
||||
phase: "Phase 2", |
||||
listTitle: [ |
||||
"CEO DEX Token Launch", |
||||
"Massive Marketing Campaign", |
||||
"Real Time Suprise Buybacks", |
||||
"NFT Staking and APR Staking Launch", |
||||
"5 Million Marketcap Milestone CoinGecko Listing", |
||||
], |
||||
}, |
||||
|
||||
{ |
||||
phase: 'Phase 3', |
||||
listTitle: [ |
||||
'Swap Development and Launch', |
||||
'Merchandise Launch', |
||||
'Tier 1 CEX Listings', |
||||
'CEO Bridge to ETH, Arbitrium and Polygon', |
||||
'10 Million MarketCap Milestone', |
||||
'CEOAI Bot Creator and integration with AI.', |
||||
], |
||||
}, |
||||
] |
||||
{ |
||||
phase: "Phase 3", |
||||
listTitle: [ |
||||
"Swap Development and Launch", |
||||
"Merchandise Launch", |
||||
"Tier 1 CEX Listings", |
||||
"CEO Bridge to ETH, Arbitrium and Polygon", |
||||
"10 Million MarketCap Milestone", |
||||
"CEOAI Bot Creator and integration with AI.", |
||||
], |
||||
}, |
||||
]; |
||||
|
||||
const RoadMap = (props: Props) => { |
||||
const [isVisible, setIsVisible] = useState(false) |
||||
const [isVisible, setIsVisible] = useState(false); |
||||
|
||||
useEffect(() => { |
||||
const section = document.querySelector('.animate-on-scroll') |
||||
const observer = new IntersectionObserver( |
||||
([entry]) => { |
||||
setIsVisible(entry.isIntersecting) |
||||
}, |
||||
{ threshold: 0.5 } |
||||
) |
||||
useEffect(() => { |
||||
const section = document.querySelector(".animate-on-scroll"); |
||||
const observer = new IntersectionObserver( |
||||
([entry]) => { |
||||
setIsVisible(entry.isIntersecting); |
||||
}, |
||||
{ threshold: 0.5 } |
||||
); |
||||
|
||||
if (!section) { |
||||
return |
||||
} |
||||
observer.observe(section) |
||||
if (!section) { |
||||
return; |
||||
} |
||||
observer.observe(section); |
||||
|
||||
return () => { |
||||
observer.unobserve(section) |
||||
} |
||||
}, []) |
||||
return () => { |
||||
observer.unobserve(section); |
||||
}; |
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
console.log('isVisible', isVisible) |
||||
}, [isVisible]) |
||||
useEffect(() => { |
||||
console.log("isVisible", isVisible); |
||||
}, [isVisible]); |
||||
|
||||
const styles = useSpring({ |
||||
opacity: isVisible ? 1 : 0, |
||||
transform: isVisible ? 'translateY(0)' : 'translateY(100px)', |
||||
config: { |
||||
duration: 500, |
||||
}, |
||||
}) |
||||
const styles = useSpring({ |
||||
opacity: isVisible ? 1 : 0, |
||||
transform: isVisible ? "translateX(0)" : "translateX(100px)", |
||||
config: { |
||||
duration: 500, |
||||
}, |
||||
}); |
||||
|
||||
return ( |
||||
<div |
||||
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20" |
||||
id="roadmap" |
||||
> |
||||
<h1 className="text-4xl font-bold text-center hover:text-orange-400"> |
||||
Road Map |
||||
</h1> |
||||
return ( |
||||
<div |
||||
className="container mx-auto text-white md:min-h-[60vh] animate-on-scroll py-20 relative" |
||||
id="roadmap" |
||||
> |
||||
<div className="absolute top-[150px] left-[50%] w-2 h-[80%] bg-gradient-to-b from-violet-500 to-fuchsia-500"></div> |
||||
<h1 className="text-4xl font-bold text-center hover:text-orange-400 pb-20"> |
||||
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"> |
||||
{roadMapData.map((item, index) => { |
||||
return ( |
||||
<animated.div |
||||
key={index} |
||||
className="lg:w-1/4 bg-orange-400 rounded-lg min-h-[250px] p-5" |
||||
style={styles} |
||||
> |
||||
<h4 className="text-center text-3xl text-gray-100 font-semibold mb-6"> |
||||
{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" |
||||
> |
||||
<VscDebugBreakpointLog width={18} /> |
||||
<p className="font-medium font-body"> |
||||
{listItem} |
||||
</p> |
||||
</li> |
||||
) |
||||
})} |
||||
</ol> |
||||
</animated.div> |
||||
) |
||||
<h4 className="timeline-title p-2 text-[28px] text-[#6a06ec] font-medium"> |
||||
{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 p-2 text-lg" |
||||
> |
||||
<VscDebugBreakpointLog |
||||
style={{ |
||||
color: "#B051F2", |
||||
}} |
||||
/> |
||||
<p className="font-medium font-body">{listItem}</p> |
||||
</li> |
||||
); |
||||
})} |
||||
</ol> |
||||
</div> |
||||
</div> |
||||
) |
||||
} |
||||
); |
||||
})} |
||||
</animated.div> |
||||
</div> |
||||
// </div>
|
||||
); |
||||
}; |
||||
|
||||
export default RoadMap |
||||
export default RoadMap; |
||||
|
||||
@ -1,138 +1,191 @@ |
||||
import { useSpring, animated } from '@react-spring/web' |
||||
import { useEffect, useState } from 'react' |
||||
import tokenomicChart from '../../../assets/images/tokenomic-chart.png' |
||||
|
||||
type Props = {} |
||||
import { useSpring, animated } from "@react-spring/web"; |
||||
import { useEffect, useState } from "react"; |
||||
import tokenomicChart from "../../../assets/images/tokenomic-chart.png"; |
||||
import { Pie } from "react-chartjs-2"; |
||||
import "chart.js/auto"; |
||||
type Props = {}; |
||||
|
||||
const tokenomics = [ |
||||
{ |
||||
title: 'Liquidity - 5% 1,000,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#86eae9]', |
||||
}, |
||||
{ |
||||
title: 'Private Sale - 17% 3,400,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#5dbdd3]', |
||||
}, |
||||
{ |
||||
title: 'Stacking & Farming - 15% 3,000,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#4591b8]', |
||||
}, |
||||
{ |
||||
title: 'Marketing & Promotion - 15% 3,000,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#3b6696]', |
||||
}, |
||||
{ |
||||
title: 'Public Sale - 14% 2,800,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#353c6e]', |
||||
}, |
||||
{ |
||||
title: 'Reward & Q&A - 10% 2,000,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#705788]', |
||||
}, |
||||
{ |
||||
title: 'Advisor - 10% 2,000,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#a5769e]', |
||||
}, |
||||
{ |
||||
title: 'Treasury - 14% 2,800,000 SGPT', |
||||
description: ' ', |
||||
color: 'bg-[#d59ab3]', |
||||
}, |
||||
] |
||||
{ |
||||
title: "Liquidity - 5% 1,000,000 SGPT", |
||||
precent: "5", |
||||
description: " ", |
||||
color: "#86eae9", |
||||
bgcolor: "bg-[#86eae9]", |
||||
}, |
||||
{ |
||||
title: "Private Sale - 17% 3,400,000 SGPT", |
||||
description: " ", |
||||
precent: "17", |
||||
color: "#5dbdd3", |
||||
bgcolor: "bg-[#5dbdd3]", |
||||
}, |
||||
{ |
||||
title: "Stacking & Farming - 15% 3,000,000 SGPT", |
||||
description: " ", |
||||
precent: "15", |
||||
color: "#4591b8", |
||||
bgcolor: "bg-[#4591b8]", |
||||
}, |
||||
{ |
||||
title: "Marketing & Promotion - 15% 3,000,000 SGPT", |
||||
description: " ", |
||||
precent: "15", |
||||
color: "#3b6696", |
||||
bgcolor: "bg-[#3b6696]", |
||||
}, |
||||
{ |
||||
title: "Public Sale - 14% 2,800,000 SGPT", |
||||
description: " ", |
||||
precent: "14", |
||||
color: "#353c6e", |
||||
bgcolor: "bg-[#353c6e]", |
||||
}, |
||||
{ |
||||
title: "Reward & Q&A - 10% 2,000,000 SGPT", |
||||
description: " ", |
||||
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 [isVisible, setIsVisible] = useState(true) |
||||
const [isVisible, setIsVisible] = useState(false); |
||||
|
||||
useEffect(() => { |
||||
const section = document.querySelector('#tokenomics') |
||||
const observer = new IntersectionObserver( |
||||
([entry]) => { |
||||
setIsVisible(entry.isIntersecting) |
||||
}, |
||||
{ threshold: 0.5 } |
||||
) |
||||
useEffect(() => { |
||||
const section = document.getElementById("tokenomics"); |
||||
const observer = new IntersectionObserver( |
||||
([entry]) => { |
||||
setIsVisible(entry.isIntersecting); |
||||
}, |
||||
{ threshold: 0.5 } |
||||
); |
||||
|
||||
if (!section) { |
||||
return |
||||
} |
||||
observer.observe(section) |
||||
if (!section) { |
||||
return; |
||||
} |
||||
observer.observe(section); |
||||
|
||||
return () => { |
||||
observer.unobserve(section) |
||||
} |
||||
}, []) |
||||
return () => { |
||||
observer.unobserve(section); |
||||
}; |
||||
}, []); |
||||
|
||||
useEffect(() => { |
||||
console.log('isVisible', isVisible) |
||||
}, [isVisible]) |
||||
useEffect(() => { |
||||
console.log("isVisible", isVisible); |
||||
}, [isVisible]); |
||||
|
||||
const styles = useSpring({ |
||||
opacity: isVisible ? 1 : 0, |
||||
from: { |
||||
opacity: 0, |
||||
transform: 'translateY(100px)', |
||||
}, |
||||
to: { |
||||
opacity: isVisible ? 1 : 0, |
||||
transform: 'translateY(0px)', |
||||
}, |
||||
const styles = useSpring({ |
||||
opacity: isVisible ? 1 : 0, |
||||
transform: isVisible ? "translateY(0)" : "translateY(100px)", |
||||
config: { |
||||
duration: 500, |
||||
}, |
||||
}); |
||||
|
||||
config: { |
||||
duration: 500, |
||||
const textCenter = { |
||||
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"> |
||||
<div className="lg:w-1/2 flex justify-center"> |
||||
<img |
||||
src={tokenomicChart} |
||||
alt="" |
||||
className="rounded-3xl w-[80%]" |
||||
/> |
||||
</div> |
||||
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 justify-center items-center lg:justify-between flex-col gap-y-12 gap-x-4 lg:flex-row"> |
||||
<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"> |
||||
<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) => { |
||||
return ( |
||||
<animated.li |
||||
key={index} |
||||
className={`text-center w-full lg:w-2/3 bg-slate-200 py-3 relative`} |
||||
style={{ |
||||
...styles, |
||||
}} |
||||
> |
||||
<div |
||||
className={`absolute h-full top-0 w-2 ${item.color}`} |
||||
></div> |
||||
<h4 className="text-xl font-bold text-gray-700"> |
||||
{item.title} |
||||
</h4> |
||||
<p className="text-gray-500"> |
||||
{item.description} |
||||
</p> |
||||
</animated.li> |
||||
) |
||||
})} |
||||
</ul> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
<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"> |
||||
{tokenomics.map((item, index) => { |
||||
return ( |
||||
<animated.li |
||||
key={index} |
||||
className={`text-center w-full lg:w-3/4 bg-slate-200 py-3 relative`} |
||||
style={styles} |
||||
> |
||||
<div |
||||
className={`absolute h-full top-0 w-2 ${item.bgcolor}`} |
||||
></div> |
||||
<h4 className="text-xl font-bold text-gray-700"> |
||||
{item.title} |
||||
</h4> |
||||
<p className="text-gray-500">{item.description}</p> |
||||
</animated.li> |
||||
); |
||||
})} |
||||
</ul> |
||||
</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