|
|
@ -3,17 +3,11 @@ import React, { useEffect, useState, useRef, useContext } from 'react' |
|
|
|
import { ThemeContext, themes } from '../themeContext' |
|
|
|
import { ThemeContext, themes } from '../themeContext' |
|
|
|
import Carousel from 'react-multi-carousel' |
|
|
|
import Carousel from 'react-multi-carousel' |
|
|
|
import 'react-multi-carousel/lib/styles.css' |
|
|
|
import 'react-multi-carousel/lib/styles.css' |
|
|
|
import CustomButtonGroupDots from './customButtonGroupDots' |
|
|
|
|
|
|
|
const _paq = window._paq = window._paq || [] // eslint-disable-line
|
|
|
|
const _paq = window._paq = window._paq || [] // eslint-disable-line
|
|
|
|
|
|
|
|
|
|
|
|
function HomeTabFeatured() { |
|
|
|
function HomeTabFeatured() { |
|
|
|
const themeFilter = useContext(ThemeContext) |
|
|
|
const themeFilter = useContext(ThemeContext) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
|
|
|
return () => { |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, []) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="pt-3 pl-2" id="hTFeaturedeSection"> |
|
|
|
<div className="pt-3 pl-2" id="hTFeaturedeSection"> |
|
|
|
<label style={{ fontSize: "1.2rem" }}>Featured</label> |
|
|
|
<label style={{ fontSize: "1.2rem" }}>Featured</label> |
|
|
@ -21,7 +15,6 @@ function HomeTabFeatured() { |
|
|
|
<div className="w-100 d-flex flex-column" style={{ height: "200px" }}> |
|
|
|
<div className="w-100 d-flex flex-column" style={{ height: "200px" }}> |
|
|
|
<ThemeContext.Provider value={themeFilter}> |
|
|
|
<ThemeContext.Provider value={themeFilter}> |
|
|
|
<Carousel |
|
|
|
<Carousel |
|
|
|
customButtonGroup={<CustomButtonGroupDots next={undefined} previous={undefined} goToSlide={undefined} />} |
|
|
|
|
|
|
|
arrows={false} |
|
|
|
arrows={false} |
|
|
|
swipeable={false} |
|
|
|
swipeable={false} |
|
|
|
draggable={true} |
|
|
|
draggable={true} |
|
|
@ -30,17 +23,18 @@ function HomeTabFeatured() { |
|
|
|
renderDotsOutside={true} |
|
|
|
renderDotsOutside={true} |
|
|
|
ssr={true} // means to render carousel on server-side.
|
|
|
|
ssr={true} // means to render carousel on server-side.
|
|
|
|
infinite={true} |
|
|
|
infinite={true} |
|
|
|
|
|
|
|
partialVisible={false} |
|
|
|
centerMode={false} |
|
|
|
centerMode={false} |
|
|
|
autoPlay={true} |
|
|
|
autoPlay={true} |
|
|
|
keyBoardControl={true} |
|
|
|
keyBoardControl={true} |
|
|
|
containerClass="border carousel-container" |
|
|
|
containerClass="border w-full carousel-container" |
|
|
|
sliderClass="px-2 h-100 justify-content-between" |
|
|
|
sliderClass="h-100 justify-content-between" |
|
|
|
deviceType={"desktop"} |
|
|
|
deviceType={"desktop"} |
|
|
|
itemClass="px-2 carousel-item-padding-10-px" |
|
|
|
itemClass="" |
|
|
|
autoPlaySpeed={15000} |
|
|
|
autoPlaySpeed={15000} |
|
|
|
dotListClass="position-relative mt-2" |
|
|
|
dotListClass="position-relative mt-2" |
|
|
|
> |
|
|
|
> |
|
|
|
<div className="d-flex"> |
|
|
|
<div className="mx-1 px-1 d-flex"> |
|
|
|
<img src={"assets/img/bgRemi.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img> |
|
|
|
<img src={"assets/img/bgRemi.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img> |
|
|
|
<div className="h6 w-50 p-4" style={{ flex: "1" }}> |
|
|
|
<div className="h6 w-50 p-4" style={{ flex: "1" }}> |
|
|
|
<h5>JUMP INTO WEB3</h5> |
|
|
|
<h5>JUMP INTO WEB3</h5> |
|
|
@ -48,7 +42,7 @@ function HomeTabFeatured() { |
|
|
|
<a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'jumpIntoWeb3'])} target="__blank" href="https://remix-project.org">More</a> |
|
|
|
<a className="remixui_home_text" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'jumpIntoWeb3'])} target="__blank" href="https://remix-project.org">More</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="d-flex"> |
|
|
|
<div className="mx-1 px-1 d-flex"> |
|
|
|
<img src={"/assets/img/remixRewardUser.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img> |
|
|
|
<img src={"/assets/img/remixRewardUser.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img> |
|
|
|
<div className="h6 p-4" style={{ flex: "1" }}> |
|
|
|
<div className="h6 p-4" style={{ flex: "1" }}> |
|
|
|
<h5>REMIX REWARDS</h5> |
|
|
|
<h5>REMIX REWARDS</h5> |
|
|
@ -59,7 +53,7 @@ function HomeTabFeatured() { |
|
|
|
<a className="remixui_home_text" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'remixRewards'])} href="https://rewards.remix.ethereum.eth.limo">More</a> |
|
|
|
<a className="remixui_home_text" target="__blank" onClick={() => _paq.push(['trackEvent', 'hometab', 'featuredSection', 'remixRewards'])} href="https://rewards.remix.ethereum.eth.limo">More</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="d-flex"> |
|
|
|
<div className="mx-1 px-1 d-flex"> |
|
|
|
<img src={"/assets/img/remixRewardBetaTester.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img> |
|
|
|
<img src={"/assets/img/remixRewardBetaTester.webp"} style={{ flex: "1", height: "170px", maxWidth: "170px" }} alt="" ></img> |
|
|
|
<div className="h6 p-4" style={{ flex: "1" }}> |
|
|
|
<div className="h6 p-4" style={{ flex: "1" }}> |
|
|
|
<h5>BETA TESTING</h5> |
|
|
|
<h5>BETA TESTING</h5> |
|
|
|