File: //home/arjun/projects/propbase/propbase_website/components/Teams.tsx
import { SelectedPage } from '@/types/home';
import { motion } from 'framer-motion';
import { useEffect, useRef, useState } from 'react';
import Slider, { Settings } from 'react-slick';
type Props = {
setSelected: (value: SelectedPage) => void;
};
interface SliderItem {
imgSrc: string;
title: string;
description: string;
}
const Teams = ({ setSelected }: Props) => {
const [nav1, setNav1] = useState<Slider | null>(null);
const [nav2, setNav2] = useState<Slider | null>(null);
const slider1 = useRef<Slider | null>(null);
const slider2 = useRef<Slider | null>(null);
const settingsImageSlider: Settings = {
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
infinite: false,
asNavFor: nav2 || undefined,
};
const settingsDetailSlider: Settings = {
slidesToShow: 3,
slidesToScroll: 3,
dots: false,
arrows: false,
centerMode: false,
vertical: true,
verticalSwiping: true,
infinite: false,
accessibility: false,
focusOnSelect: true,
asNavFor: nav1 || undefined,
};
useEffect(() => {
setNav1(slider1.current);
setNav2(slider2.current);
}, []);
const imgSliderData: SliderItem[] = [
{ imgSrc: 'img/slider-img-1.png', title: '', description: '' },
{ imgSrc: 'img/slider-img-2.png', title: '', description: '' },
{ imgSrc: 'img/slider-img-3.png', title: '', description: '' },
];
const detailSliderData = [
{
imgSrc: 'img/slider-icn-1.svg',
title: 'Aptos Blockchain',
description:
"The industry's only scalable layer-1 proof of stake blockchain that has the highest transaction",
},
{
imgSrc: 'img/slider-icn-2.svg',
title: 'BASE Blockchain',
description: 'BASE is a secure, highly scalable layer-2 blockchain powered by Coinbase.',
},
{
imgSrc: 'img/slider-icn-3.svg',
title: 'Fusion',
description:
'Fusion is a cutting-edge platform designed to enhance scalability and security.',
},
];
return (
<motion.div onViewportEnter={() => setSelected(SelectedPage.Team)} id={SelectedPage.Team}>
<section className="team-sec layer-1">
<div className="container-1400 container">
<div className="team-title-block">
<div className="sub-title-block text-center">
<h4>
<span className="sub-title-label">Our Team</span>
</h4>
<h2 className="sub-title">
Meet the <span className="txt-blue">leadership team</span>
</h2>
<p className="title-p">
Propbase is a highly scalable, fast, and secure blockchain based tokenized property
transaction platform. Built using the most advanced technology, transforming
property into a modern liquid asset class.
</p>
</div>
</div>
<div className="team-wrapper">
<div className="row gx-4">
<div className="col-md-4 team-col">
<div className="team-card text-center">
<div className="img-block">
<img src="img/team-1.png" alt="" />
</div>
<h3>Kevin Goos</h3>
<p>Founder & CEO</p>
<div className="notes">
Entrepreneur and expert in technical platform development
</div>
<div className="link-block">
<a
target="_blank"
className="auth-link rounded-circle d-inline-flex align-items-center justify-content-center"
href="#"
>
<img src="img/auth-link1.svg" alt="" />
</a>
<a
target="_blank"
className="auth-link rounded-circle d-inline-flex align-items-center justify-content-center"
href="#"
>
<img src="img/auth-link2.svg" alt="" />
</a>
</div>
</div>
</div>
<div className="col-md-4 team-col">
<div className="team-card text-center">
<div className="img-block">
<img src="img/team-2.png" alt="" />
</div>
<h3>Jesse Gage</h3>
<p>Executive Director</p>
<div className="notes">
Expert in building online marketplaces, media, and marketing
</div>
<div className="link-block">
<a
target="_blank"
className="auth-link rounded-circle d-inline-flex align-items-center justify-content-center"
href="#"
>
<img src="img/auth-link1.svg" alt="" />
</a>
<a
target="_blank"
className="auth-link rounded-circle d-inline-flex align-items-center justify-content-center"
href="#"
>
<img src="img/auth-link2.svg" alt="" />
</a>
</div>
</div>
</div>
<div className="col-md-4 team-col">
<div className="team-card text-center">
<div className="img-block">
<img src="img/team-3.png" alt="" />
</div>
<h3>Hudson Leung</h3>
<p>Executive Director</p>
<div className="notes">Expert in growth strategy, web3, and marketplaces</div>
<div className="link-block">
<a
target="_blank"
className="auth-link rounded-circle d-inline-flex align-items-center justify-content-center"
href="#"
>
<img src="img/auth-link1.svg" alt="" />
</a>
<a
target="_blank"
className="auth-link rounded-circle d-inline-flex align-items-center justify-content-center"
href="#"
>
<img src="img/auth-link2.svg" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="our-tech-sec layer-1">
<div className="container-1400 container">
<div className="our-tech-row d-flex">
<div className="tech-col-left">
<div className="tech-col-cover">
<div className="sub-title-block">
<h4>
<span className="sub-title-label">Our Tech</span>
</h4>
<h2 className="sub-title">
Propbase <span className="txt-blue">Our Tech</span>
</h2>
<p>
Propbase is a highly scalable, fast, and secure blockchain-based tokenized
property transaction platform. Built using the most advanced technology,
transforming property into a modern liquid asset class.
</p>
</div>
<div className="lg-slider-block">
<Slider {...settingsImageSlider} className="tech-img-slider" ref={slider1}>
{imgSliderData.map((slide, index) => (
<img src={slide.imgSrc} alt={`Tech Image ${index + 1}`} key={index} />
))}
</Slider>
</div>
</div>
</div>
<div className="tech-col-right">
<div className="sm-slider-block">
<Slider {...settingsDetailSlider} className="tech-detail-slider" ref={slider2}>
{detailSliderData.map((slide, index) => (
<>
<div className="num" onClick={() => console.log('first', index)}>
<img src={slide.imgSrc} alt={`Icon ${index + 1}`} />
</div>
<h3>{slide.title}</h3>
<p>{slide.description}</p>
<div className="id-box">
iudg3uydfg86328735487rdhgc3d76...875328rdf
<button className="id-copy-btn">
<img src="img/copi-id-blue.svg" alt="Copy ID" />
</button>
</div>
</>
))}
</Slider>
</div>
</div>
</div>
</div>
</section>
<section className="partner-sec layer-1">
<div className="container-1400 container">
<div className="partner-block-cover">
<h3 className="title-md">Blockchain Partners</h3>
<div className="row">
<div className="col-md-6 partner-col">
<div className="content-block">
<div className="logo-img">
<img src="img/aptos-logo.svg" alt="" />
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</p>
<div className="btn-block">
<a className="visit-link" href="#">
Visit Tracemoves
</a>
<a className="visit-link" href="#">
Visit Aptos Explorer
</a>
</div>
</div>
</div>
<div className="col-md-6 partner-col">
<div className="content-block">
<div className="logo-img">
<img src="img/base-logo.svg" alt="" />
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</p>
<div className="btn-block">
<a className="visit-link" href="#">
Visit Basescan
</a>
</div>
</div>
</div>
</div>
</div>
<div className="security-block-cover">
<h3 className="title-md">Security</h3>
<div className="row">
<div className="col-md-6 security-col">
<div className="security-card d-flex">
<div className="content-left">
<div className="content-logo">
<img src="img/csrt-logo.svg" alt="" />
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</p>
<div className="btn-block">
<a className="visit-link" href="#">
View Audit
</a>
</div>
</div>
<div className="range-block">
<div className="range-cover">
<img style={{ maxWidth: '100%' }} src="img/home-hakn-grp-1.svg" alt="" />
</div>
</div>
</div>
</div>
<div className="col-md-6 security-col">
<div className="security-card d-flex">
<div className="content-left">
<div className="content-logo">
<img src="img/hacken-logo.svg" alt="" />
</div>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry
</p>
<div className="btn-block">
<a className="visit-link" href="#">
View Audit
</a>
</div>
</div>
<div className="range-block">
<div className="range-cover">
<img style={{ maxWidth: '100%' }} src="img/home-hakn-grp-1.svg" alt="" />
</div>
</div>
</div>
</div>
</div>
</div>
<div className="bridging-block-cover">
<h3 className="title-md">Bridging partner</h3>
<div className="bridging-content-cover">
<div className="bridging-logo">
<img src="img/chainge-logo.svg" alt="" />
</div>
<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>
<div className="wallet-block-cover">
<h3 className="title-md">Wallets</h3>
<div className="wallet-row d-flex">
<div className="wallet-col">
<img src="img/penta-sm-1.svg" alt="" />
Petra
</div>
<div className="wallet-col">
<img src="img/penta-sm-2.svg" alt="" />
Martian
</div>
<div className="wallet-col">
<img src="img/penta-sm-3.svg" alt="" />
Pontem
</div>
<div className="wallet-col">
<img src="img/penta-sm-4.svg" alt="" />
Coinbase
</div>
<div className="wallet-col">
<img src="img/penta-sm-5.svg" alt="" />
MetaMask
</div>
</div>
</div>
</div>
</section>
</motion.div>
);
};
export default Teams;