Thuong_e
2 years ago
parent
abdbb9350e
commit
e7cc1d132d
@ -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) => { |
||||||
|
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 ( |
return ( |
||||||
<div |
<div |
||||||
className="container flex justify-between items-center mx-auto py-2 text-white" |
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" |
id="qna" |
||||||
> |
> |
||||||
<div> |
<div className="w-full lg:w-[50%]"> |
||||||
<h1 className="text-4xl font-bold text-center hover:text-orange-400"> |
<h1 className="text-4xl font-bold text-center hover:text-orange-400"> |
||||||
FAQS |
FAQS |
||||||
</h1> |
</h1> |
||||||
<h2> |
<h2 className="text-center "> |
||||||
See some of the most frequently asked questions about Fight |
See some of the most frequently asked questions about Fight |
||||||
{/* Out here. Got a question that’s not on the list? Let us know |
{/* Out here. Got a question that’s not on the list? Let us know |
||||||
below! */} |
below! */} |
||||||
</h2> |
</h2> |
||||||
</div> |
</div> |
||||||
<div>ABC</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> |
||||||
) |
</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 |
export default QnASection; |
||||||
|
|||||||
@ -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', |
title: "Private Sale - 17% 3,400,000 SGPT", |
||||||
description: ' ', |
description: " ", |
||||||
color: 'bg-[#5dbdd3]', |
precent: "17", |
||||||
|
color: "#5dbdd3", |
||||||
|
bgcolor: "bg-[#5dbdd3]", |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
title: 'Stacking & Farming - 15% 3,000,000 SGPT', |
title: "Stacking & Farming - 15% 3,000,000 SGPT", |
||||||
description: ' ', |
description: " ", |
||||||
color: 'bg-[#4591b8]', |
precent: "15", |
||||||
|
color: "#4591b8", |
||||||
|
bgcolor: "bg-[#4591b8]", |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
title: 'Marketing & Promotion - 15% 3,000,000 SGPT', |
title: "Marketing & Promotion - 15% 3,000,000 SGPT", |
||||||
description: ' ', |
description: " ", |
||||||
color: 'bg-[#3b6696]', |
precent: "15", |
||||||
|
color: "#3b6696", |
||||||
|
bgcolor: "bg-[#3b6696]", |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
title: 'Public Sale - 14% 2,800,000 SGPT', |
title: "Public Sale - 14% 2,800,000 SGPT", |
||||||
description: ' ', |
description: " ", |
||||||
color: 'bg-[#353c6e]', |
precent: "14", |
||||||
|
color: "#353c6e", |
||||||
|
bgcolor: "bg-[#353c6e]", |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
title: 'Reward & Q&A - 10% 2,000,000 SGPT', |
title: "Reward & Q&A - 10% 2,000,000 SGPT", |
||||||
description: ' ', |
description: " ", |
||||||
color: 'bg-[#705788]', |
precent: "10", |
||||||
|
color: "#705788", |
||||||
|
bgcolor: "bg-[#705788]", |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
title: 'Advisor - 10% 2,000,000 SGPT', |
title: "Advisor - 10% 2,000,000 SGPT", |
||||||
description: ' ', |
description: " ", |
||||||
color: 'bg-[#a5769e]', |
precent: "10", |
||||||
|
color: "#a5769e", |
||||||
|
bgcolor: "bg-[#a5769e]", |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
title: 'Treasury - 14% 2,800,000 SGPT', |
title: "Treasury - 14% 2,800,000 SGPT", |
||||||
description: ' ', |
description: " ", |
||||||
color: 'bg-[#d59ab3]', |
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, |
|
||||||
transform: 'translateY(100px)', |
|
||||||
}, |
|
||||||
to: { |
|
||||||
opacity: isVisible ? 1 : 0, |
|
||||||
transform: 'translateY(0px)', |
|
||||||
}, |
|
||||||
|
|
||||||
config: { |
config: { |
||||||
duration: 500, |
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 ( |
return ( |
||||||
<div className="w-full pb-24" id="tokenomics"> |
<div className="w-full pb-24" id="tokenomics"> |
||||||
<div className="container mx-auto"> |
<div className="container mx-auto"> |
||||||
<h1 className="text-4xl text-white font-bold text-center mb-20"> |
<h1 className="text-4xl text-white font-bold text-center mb-20"> |
||||||
Tokenomics |
Tokenomics |
||||||
</h1> |
</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 flex flex-col gap-4 lg:flex-row"> |
<div className="w-full lg:w-1/2 flex justify-center"> |
||||||
<div className="lg:w-1/2 flex justify-center"> |
<animated.div style={{ width: "500px", ...styles }}> |
||||||
<img |
<Pie data={userData} plugins={[textCenter]} options={labelText} /> |
||||||
src={tokenomicChart} |
</animated.div> |
||||||
alt="" |
|
||||||
className="rounded-3xl w-[80%]" |
|
||||||
/> |
|
||||||
</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 |
<div |
||||||
className={`absolute h-full top-0 w-2 ${item.color}`} |
className={`absolute h-full top-0 w-2 ${item.bgcolor}`} |
||||||
></div> |
></div> |
||||||
<h4 className="text-xl font-bold text-gray-700"> |
<h4 className="text-xl font-bold text-gray-700"> |
||||||
{item.title} |
{item.title} |
||||||
</h4> |
</h4> |
||||||
<p className="text-gray-500"> |
<p className="text-gray-500">{item.description}</p> |
||||||
{item.description} |
|
||||||
</p> |
|
||||||
</animated.li> |
</animated.li> |
||||||
) |
); |
||||||
})} |
})} |
||||||
</ul> |
</ul> |
||||||
</div> |
</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