File: //home/arjun/projects/propbase/propbase_website/components/Home.tsx
import { SelectedPage } from '@/types/home';
import { motion } from 'framer-motion';
import Slider from 'react-slick';
type Props = {
setSelected: (value: SelectedPage) => void;
};
interface Slide {
imgSrc: string;
title: string;
content: string;
}
const Home = ({ setSelected }: Props) => {
const settings = {
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: false,
dots: true,
};
const propertySettings = {
speed: 2000,
autoplay: true,
autoplaySpeed: 0,
centerMode: true,
cssEase: 'linear',
slidesToShow: 1,
slidesToScroll: 1,
variableWidth: true,
infinite: true,
initialSlide: 1,
arrows: false,
buttons: false,
};
const welcomeSliderItems: Slide[] = [
{
imgSrc: 'img/ansmnt.svg',
title: 'Welcome to the Future',
content: 'Real Estate Investing Real Estate Investing 23-10-2024',
},
{
imgSrc: 'img/ansmnt.svg',
title: 'Welcome to the Future',
content: 'Real Estate Investing Real Estate Investing 23-10-2024',
},
{
imgSrc: 'img/ansmnt.svg',
title: 'Welcome to the Future',
content: 'Real Estate Investing Real Estate Investing 23-10-2024',
},
];
const propertySliderItems: Slide[] = [
{
imgSrc: 'img/bnr-logo-1.svg',
title: '',
content: '',
},
{
imgSrc: 'img/bnr-logo-2.svg',
title: '',
content: '',
},
{
imgSrc: 'img/bnr-logo-3.svg',
title: '',
content: '',
},
{
imgSrc: 'img/bnr-logo-4.svg',
title: '',
content: '',
},
{
imgSrc: 'img/bnr-logo-5.svg',
title: '',
content: '',
},
{
imgSrc: 'img/bnr-logo-6.svg',
title: '',
content: '',
},
{
imgSrc: 'img/bnr-logo-7.svg',
title: '',
content: '',
},
{
imgSrc: 'img/bnr-logo-8.svg',
title: '',
content: '',
},
{
imgSrc: 'img/bnr-logo-9.svg',
title: '',
content: '',
},
{
imgSrc: 'img/bnr-logo-10.svg',
title: '',
content: '',
},
];
return (
<motion.div onViewportEnter={() => setSelected(SelectedPage.Home)} id={SelectedPage.Home}>
<section className="home-banner-sec">
<div className="banner-content-sec layer-1">
<div className="container-1400 container">
<div className="banner-content-wrapper d-flex">
<div className="text-block">
<h2>
Welcome to the Future of
<span className="txt-blue">Real Estate Investing</span>
</h2>
<p>
Invest with as little as $100 and gain access to high-quality, resilient real
estate assets through fractional ownership. PROPS, the native utility token of
Propbase, powers all smart contract interactions, property transaction fees,
rewards, memberships, and more!!!
</p>
<div className="btn-block d-flex">
<div className="btn-col">
<a className="stake-btn" href="#">
Stake PROPS
</a>
<a className="how-works" href="#">
How It Works <img src="img/how-link.svg" alt="" />
</a>
</div>
<div className="btn-col">
<a className="stake-btn stake-btn-mkt" href="#">
Marketplace
</a>
<a className="how-works" href="#">
How It Works <img src="img/how-link.svg" alt="" />
</a>
</div>
</div>
<div className="welcome-slider-cover">
<Slider {...settings} className="welcome-slider">
{welcomeSliderItems.map((slide, index) => (
<div className="welcome-notes" key={index}>
<h4>
<img src={slide?.imgSrc} alt="" /> {slide?.title}
</h4>
<p>{slide?.content}</p>
</div>
))}
</Slider>
</div>
</div>
<div className="img-block">
<img src="img/home-bnr.svg" alt="" />
</div>
</div>
</div>
</div>
<div className="banner-data-block layer-1">
<div className="container-1400 container">
<div className="data-block-wrapper d-flex">
<div className="data-card">
<p>Props Price</p>
<h4>$23,934,355</h4>
</div>
<div className="data-card">
<p>Onchain Holders</p>
<h4>19,356</h4>
</div>
<div className="data-card">
<p>Market Cap</p>
<h4>19,356</h4>
</div>
<div className="data-card">
<p>Volume</p>
<h4>145</h4>
</div>
<div className="data-card">
<p>TVL (staking)</p>
<h4>1457</h4>
</div>
</div>
</div>
</div>
<div className="logo-block layer-1">
<Slider {...propertySettings} className="slick-marquee">
{propertySliderItems.map((slide, index) => (
<div className="logo-card" key={index}>
<img src={slide?.imgSrc} alt="" />
</div>
))}
</Slider>
</div>
<div className="banner-soc-block">
<a className="bnr-soc-link" href="#">
<img src="img/bnr-soc-1.svg" alt="" />
</a>
<a className="bnr-soc-link" href="#">
<img src="img/bnr-soc-2.svg" alt="" />
</a>
<a className="bnr-soc-link" href="#">
<img src="img/bnr-soc-3.svg" alt="" />
</a>
<a className="bnr-soc-link" href="#">
<img src="img/bnr-soc-4.svg" alt="" />
</a>
<a className="bnr-soc-link" href="#">
<img src="img/bnr-soc-5.svg" alt="" />
</a>
</div>
</section>
<section className="property-nexus-sec layer-1">
<div className="container-1400 container">
<div className="property-det-wrapper d-flex">
<div className="img-block">
<img src="img/prop-nex-1.svg" alt="" />
</div>
<div className="property-content-block">
<div className="sub-title-block">
<h4>
<span className="sub-title-label">Property Nexus</span>
</h4>
<h2 className="sub-title">
A next-gen property <br />
<span className="txt-blue">investing experience</span>
</h2>
</div>
<div className="property-nexus-wrapper d-flex">
<div className="prop-col">
<div className="prop-icon">
<img src="img/nex-prop-1.svg" alt="" />
</div>
<h4>Qualified properties</h4>
<p>All properties are qualified assets with management companies.</p>
</div>
<div className="prop-col">
<div className="prop-icon">
<img src="img/nex-prop-2.svg" alt="" />
</div>
<h4>Fractional ownership</h4>
<p>
Stake your tokens to earn high-yield rewards, with automatic compounding for
greater growth.
</p>
</div>
<div className="prop-col">
<div className="prop-icon">
<img src="img/nex-prop-3.svg" alt="" />
</div>
<h4>P2P marketplace</h4>
<p>Sell your tokens anytime by creating a listing on our P2P marketplace.</p>
</div>
<div className="prop-col">
<div className="prop-icon">
<img src="img/nex-prop-4.svg" alt="" />
</div>
<h4>Earn rental yield</h4>
<p>
Every property comes with a guaranteed rental income locked in for a set period
of time.
</p>
</div>
</div>
<div className="btn-block">
<a href="#" className="prop-link">
Property Marketplace
</a>
</div>
</div>
</div>
</div>
</section>
<section className="property-nexus-sec layer-1">
<div className="container-1400 container">
<div className="property-det-wrapper d-flex">
<div className="property-content-block">
<div className="sub-title-block">
<h4>
<span className="sub-title-label">Property Yield</span>
</h4>
<h2 className="sub-title">
Unlock High-Yield
<br />
<span className="txt-blue">Staking Opportunities</span>
</h2>
</div>
<div className="property-nexus-wrapper d-flex">
<div className="prop-col">
<div className="prop-icon">
<img src="img/nex-prop-1.svg" alt="" />
</div>
<h4>Maximize Staking Rewards</h4>
<p>
Stake your tokens to earn high-yield rewards, with automatic compounding for
greater growth.
</p>
</div>
<div className="prop-col">
<div className="prop-icon">
<img src="img/nex-prop-2.svg" alt="" />
</div>
<h4>Secure & Transparent</h4>
<p>
Enjoy peace of mind with blockchain-secured staking, ensuring complete
transparency and trust.
</p>
</div>
<div className="prop-col">
<div className="prop-icon">
<img src="img/nex-prop-3.svg" alt="" />
</div>
<h4>Flexible Staking Options</h4>
<p>
Pick the perfect staking period that matches your goals, from short-term gains
to long-term growth.
</p>
</div>
<div className="prop-col">
<div className="prop-icon">
<img src="img/nex-prop-4.svg" alt="" />
</div>
<h4>Instant Liquidity Access</h4>
<p>
Seamlessly withdraw or re-stake your rewards anytime with our DeFi-powered
platform.
</p>
</div>
</div>
<div className="btn-block">
<a href="#" className="prop-link">
Propbase Yield
</a>
</div>
</div>
<div className="img-block">
<img src="img/prop-nex-2.svg" alt="" />
</div>
</div>
</div>
</section>
</motion.div>
);
};
export default Home;