File: //home/arjun/projects/propbase/propbase_website/components/Tockenomics.tsx
import { SelectedPage } from '@/types/home';
import { motion } from 'framer-motion';
import { useRef } from 'react';
import Slider, { Settings } from 'react-slick';
type Props = {
setSelected: (value: SelectedPage) => void;
};
interface SliderItem {
imgSrc: string;
title: string;
description: string;
}
const Tockenomics = ({ setSelected }: Props) => {
const sliderRef = useRef<Slider | null>(null);
const settings: Settings = {
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: false,
dots: true,
};
const nextSlide = () => {
if (sliderRef.current) {
sliderRef.current.slickNext();
}
};
const prevSlide = () => {
if (sliderRef.current) {
sliderRef.current.slickPrev();
}
};
const tokenSliderItems: SliderItem[] = [
{
imgSrc: 'img/tokn-icon.svg',
title: 'IDO 35%',
description:
'We allocate 20% of the total supply for a community-driven Initial DEX Offering (IDO) at the Token Generation Event (TGE).',
},
{
imgSrc: 'img/tokn-icon.svg',
title: 'IDO 35%',
description:
'We allocate 20% of the total supply for a community-driven Initial DEX Offering (IDO) at the Token Generation Event (TGE).',
},
{
imgSrc: 'img/tokn-icon.svg',
title: 'IDO 35%',
description:
'We allocate 20% of the total supply for a community-driven Initial DEX Offering (IDO) at the Token Generation Event (TGE).',
},
];
return (
<motion.div
onViewportEnter={() => setSelected(SelectedPage.Tockenomics)}
id={SelectedPage.Tockenomics}
>
<section className="props-economy-sec layer-1">
<div className="container-1400 container">
<div className="sub-title-block text-center">
<h4>
<span className="sub-title-label">Tokenomics</span>
</h4>
<h2 className="sub-title">
PROPS <span className="txt-blue">Economy</span>
</h2>
<p className="title-p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry`'`s standard dummy text ever since the 1500s
</p>
</div>
<div className="economy-tab-wrapper d-flex">
<div className="econ-left-block">
<div className="econ-btn-block">
<div className="econ-btn-item">
<button className="econ-btn">
<span className="icon-sm">
<img src="img/econ-1.svg" alt="" />
</span>{' '}
Membership Access
</button>
</div>
<div className="econ-btn-item">
<button className="econ-btn active">
<span className="icon-sm">
<img src="img/econ-2.svg" alt="" />
</span>{' '}
Platform Fees
</button>
</div>
<div className="econ-btn-item">
<button className="econ-btn">
<span className="icon-sm">
<img src="img/econ-3.svg" alt="" />
</span>{' '}
Affiliate Module
</button>
</div>
<div className="econ-btn-item">
<button className="econ-btn">
<span className="icon-sm">
<img src="img/econ-4.svg" alt="" />
</span>{' '}
Mortgage Module
</button>
</div>
<div className="econ-btn-item">
<button className="econ-btn">
<span className="icon-sm">
<img src="img/econ-5.svg" alt="" />
</span>{' '}
Smart Contract Settlement
</button>
</div>
<div className="econ-btn-item">
<button className="econ-btn">
<span className="icon-sm">
<img src="img/econ-6.svg" alt="" />
</span>{' '}
Leverage Module
</button>
</div>
<div className="econ-btn-item">
<button className="econ-btn">
<span className="icon-sm">
<img src="img/econ-7.svg" alt="" />
</span>{' '}
Property Discounts
</button>
</div>
<div className="econ-btn-item">
<button className="econ-btn">
<span className="icon-sm">
<img src="img/econ-8.svg" alt="" />
</span>{' '}
On ramp/off ramp Fees
</button>
</div>
</div>
</div>
<div className="econ-right-block">
<div className="econ-det-cover">
<div className="econ-det-card">
<h4>
<img className="title-icon" src="img/econ-1.svg" alt="" /> Platform Fees
</h4>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry`'`s standard dummy text ever since the
1500s
</p>
<div className="det-img-block text-center">
<img src="img/props-tokn-lg.svg" alt="" />
</div>
</div>
</div>
</div>
</div>
{/* <div class="economy-cover">
<div class="tokn-block">
<div class="tokn-img-block">
<img src="img/props-tokn-lg.svg" alt="">
</div>
<div class="tok-feat-block feat-block-1">
<img src="img/economy-1.svg" alt=""> Membership Access
</div>
<div class="tok-feat-block feat-block-2 feat-block-rgt">
<img src="img/economy-2.svg" alt=""> Membership Access
</div>
<div class="tok-feat-block feat-block-3">
<img src="img/economy-3.svg" alt=""> Membership Access
</div>
<div class="tok-feat-block feat-block-4">
<img src="img/economy-4.svg" alt=""> Membership Access
</div>
<div class="tok-feat-block feat-block-5">
<img src="img/economy-5.svg" alt=""> Membership Access
</div>
<div class="tok-feat-block feat-block-6">
<img src="img/economy-6.svg" alt=""> Membership Access
</div>
<div class="tok-feat-block feat-block-7">
<img src="img/economy-7.svg" alt=""> Membership Access
</div>
<div class="tok-feat-block feat-block-8">
<img src="img/economy-8.svg" alt=""> Membership Access
</div>
</div>
</div> */}
</div>
</section>
<section className="tokn-distribure-sec layer-1">
<div className="container-1400 container">
<div className="sub-title-block text-center">
<h3 className="title-md">Token Distribution</h3>
<p className="title-p">Maximizing Value Through Strategic PROPS Allocation</p>
</div>
<div className="tokn-dstrb-wrapper d-flex">
<div className="tokn-dstrb-left">
<div className="tokn-grph">
<img src="img/tokn-dstrb.svg" alt="" />
</div>
<div className="legnd-cover d-flex">
<div className="legnd-block">
<span className="indctr rounded-circle" />
<div className="lgnd-txt">
<p>Community Allocation</p>
<h4>75%</h4>
</div>
</div>
<div className="legnd-block">
<span className="indctr rounded-circle indctr-2" />
<div className="lgnd-txt">
<p>Company, Foundation, Advisors, Seed.</p>
<h4>25%</h4>
</div>
</div>
</div>
</div>
<div className="tokn-dstrb-right">
<div className="tkn-graph-slider-cover">
<div className="grph-btn-block d-flex justify-content-end">
<button
className="grph-btn rounded-circle d-inline-flex align-items-center justify-content-center"
id="grph-btn-prev"
onClick={() => prevSlide()}
>
<img src="img/tkn-prev.svg" alt="Previous" />
</button>
<button
className="grph-btn rounded-circle d-inline-flex align-items-center justify-content-center"
id="grph-btn-next"
onClick={() => nextSlide()}
>
<img src="img/tkn-nxt.svg" alt="Next" />
</button>
</div>
<div className="tkn-graph-slider">
<Slider {...settings} ref={sliderRef}>
{tokenSliderItems?.map((item, index) => (
<div key={index} className="tkn-item">
<div className="img-item">
<span className="img-block d-inline-flex rounded-circle align-items-center justify-content-center">
<img src={item?.imgSrc} alt="Token Icon" />
</span>
</div>
<h4>{item?.title}</h4>
<p>{item?.description}</p>
</div>
))}
</Slider>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="tokn-distribure-sec layer-1">
<div className="container-1400 container">
<div className="sub-title-block text-center">
<h3 className="title-md">Vesting</h3>
<p className="title-p">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</div>
<div className="vesting-graph-block">
<img src="img/vesting-grp-lg.svg" alt="" />
</div>
</div>
</section>
</motion.div>
);
};
export default Tockenomics;