diff --git a/src/components/FeatureGrid/index.js b/src/components/FeatureGrid/index.js new file mode 100644 index 00000000..a409881f --- /dev/null +++ b/src/components/FeatureGrid/index.js @@ -0,0 +1,50 @@ +import React from 'react'; +import { Link } from 'gatsby'; + +const FeatureGrid = ({ + heading, + subtext, + buttontext, + video, + videoType, + order, + mobileOrder, + padding, + to, + buttonHidden, +}) => { + return ( +
+
+

+ {heading} +

+

{subtext}

+ + + {buttontext} + +
+
+ +
+
+ ); +}; + +export default FeatureGrid; diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js index b9888701..8a0c9f8f 100644 --- a/src/components/Footer/index.js +++ b/src/components/Footer/index.js @@ -139,7 +139,12 @@ const Footer = () => {

2020 | Made with ❤️ by people @ - + BUIDL Labs

diff --git a/src/components/Mobile/index.js b/src/components/Mobile/index.js new file mode 100644 index 00000000..928289b7 --- /dev/null +++ b/src/components/Mobile/index.js @@ -0,0 +1,286 @@ +import React, { useState } from 'react'; +import { Link } from 'gatsby'; +import NavBar from '../../components/NavBar'; +import Button from '../../components/Buttons'; +import Footer from '../../components/Footer'; +import PlayButton from '../../components/LandingPage/playbutton'; +import TestimonialCard from 'src/components/TestimonialCard'; +import FeatureGrid from 'src/components/FeatureGrid'; + +import hero from '../../images/hero.webp'; +import cryptobots from '../../images/cryptobots.png'; +import earnWhileYouLearn from 'src/assets/videos/earn while you learn-anim.mp4'; +import createCurrency from 'src/assets/videos/anim-create-currency.mp4'; +import FinanceIllustration from 'src/assets/wealth.webp'; +import { MdClose } from 'react-icons/md'; +import SadBot from 'src/images/SadBot.png'; +import Theme from 'src/assets/theme.svg'; + +const MobileHome = () => { + const [videoModal, setVideoModal] = useState(0); + + const [emailModal, setEmailModal] = useState(0); + + function VideoModal() { + return ( +
+
setVideoModal(0)} + className="h-12 w-12 rounded-full bg-base-500 absolute right-4 top-4 cursor-pointer flex items-center justify-center text-white" + > + +
+
+ +
+
+ ); + } + + function EmailModal() { + return ( +
+
setEmailModal(0)} + className="h-8 w-8 rounded-full bg-base-500 p-1 absolute right-8 top-6 cursor-pointer flex items-center justify-center text-white" + > + +
+ +
+

+ Device not Supported yet! +

+

+ Requesting your email so we can send you details that you can use to + access the platform on a desktop/laptop.{' '} +

+
+ +
+ +
+
+ ); + } + + return ( + +
+ {videoModal === 1 && ( +
setVideoModal(false)} + > + +
+ )} + + {emailModal === 1 && ( +
setEmailModal(false)} + > + +
+ )} +
+ + + +
+
+
+ +
+

+ Learn to code on the blockchain, the fun way! +

+

+ Blockchain is all the hype these days, but learning blockchain + can be tough! We've got you covered with our fun and free + course, which will take you from a noob to blockchain pro in + matter of a few hours and build your own Cryptobot and then an + army of them to fight in the Cryptoverse Wars. +

+
+ +
+
+
+
+ {/* Why Blockchain starts here */} +
+
+
+
+

+ With blockchain, build better finance. +

+

+ A kid under 18 years can’t get a personal bank account, you + can’t transfer money from one continent to another without the + hassle of high bank fee, you can’t invest in companies without + putting in all your details. What if we told you, all that and + more is possible on the blockchain. +
So much in finance is getting built on top of + blockchain in the DeFi sector and just in 2020 alone, Crypto’s + market has grown by a frickin’ 5x.
+ Learn how to code on the blockchain, now’s the right time! +

+
+
+
+ +
+
+
+ {/* Why Blockchain ends here */} + {/* Features start here */} +
+
+
+

+ What’s there for You? +

+
+ + +
+
+ {/* Features end here */} + + {/* testimonials start here */} +
+
+
+

+ Here’s what people say about us +

+
+
+ + + +
+
+
+ {/* testimonials end here */} + {/* CTA start here */} +
+
+
+

+ Ready to start your mission? +

+
+
+ +
+ +
+
+ {/* CTA ends here */} +
+

+ 2020 | Made with ❤️ by people @ + + BUIDL Labs + +

+
+
+ + ); +}; + +export default MobileHome; diff --git a/src/components/TestimonialCard/index.js b/src/components/TestimonialCard/index.js new file mode 100644 index 00000000..a54da2a5 --- /dev/null +++ b/src/components/TestimonialCard/index.js @@ -0,0 +1,23 @@ +import React from 'react'; + +const TestimonialCard = ({ link, img, name, username, text }) => { + return ( + + testimonial +

{name}

+

@{username}

+

{text}

+ + ); + }; + + export default TestimonialCard; \ No newline at end of file diff --git a/src/pages/404.js b/src/pages/404.js index aebc3083..97cfebde 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -6,12 +6,8 @@ import ErrorBot from 'src/images/error.png'; const Error404 = () => { return ( <> -
{

Oops

- This page does not exists, just click the big button and get started again + This page does not exists, just click the big button and get started + again

{ const [email, setEmail] = useState(''); const [nickname, setNickname] = useState(''); + //redirect to home if in mobile/tablet + useEffect(() => { + if (isMobile || isTablet) { + navigate('/tezos'); + } + }); + useEffect(() => { typeof window !== 'undefined' && ThanosWallet.onAvailabilityChange(available => diff --git a/src/pages/tezos/academy/index.js b/src/pages/tezos/academy/index.js index ff3c7488..e7a0c1cd 100644 --- a/src/pages/tezos/academy/index.js +++ b/src/pages/tezos/academy/index.js @@ -6,6 +6,7 @@ import Footer from 'src/components/Footer'; import DoneIcon from '@material-ui/icons/Done'; import useChapters from 'src/hooks/use-chapters'; import { trackEventWithProperties } from 'src/utils/analytics'; +import { isMobile, isTablet } from 'react-device-detect'; const CourseCard = ({ m, i, progress }) => { const chapters = useChapters(m.frontmatter.slug); @@ -103,6 +104,13 @@ const CurriculumOverview = ({ return p; }, []); + //redirect to home if in mobile/tablet + useEffect(() => { + if (isMobile || isTablet) { + navigate('/tezos'); + } + }); + return ( diff --git a/src/pages/tezos/claim-transaction.js b/src/pages/tezos/claim-transaction.js index 08d08147..b5dc2306 100644 --- a/src/pages/tezos/claim-transaction.js +++ b/src/pages/tezos/claim-transaction.js @@ -29,6 +29,7 @@ import { useAtom } from 'jotai'; import { MichelsonMap } from '@taquito/taquito'; import { trackEvent } from 'src/utils/analytics'; +import { isMobile, isTablet } from 'react-device-detect'; const Steppers = ({ number, name, clickEvent, tick = false }) => { return ( @@ -161,6 +162,12 @@ function Transaction({ location }) { const [copyLink, setCopyLink] = useState(false); const [claimButtonDisabled, setClaimButtonDisabledStatus] = useState(true); + //redirect to home if in mobile/tablet + useEffect(() => { + if (isMobile || isTablet) { + navigate('/tezos'); + } + }); const ErrorModal = () => { return (
{ + if (isMobile || isTablet) { + navigate('/tezos'); + } + }); + const tokenId = useMemo(() => { const pathArr = typeof window !== 'undefined' && location.pathname.split('/'); diff --git a/src/pages/tezos/cryptobot/index.js b/src/pages/tezos/cryptobot/index.js index 3df1ba01..dfc6d61f 100644 --- a/src/pages/tezos/cryptobot/index.js +++ b/src/pages/tezos/cryptobot/index.js @@ -2,8 +2,15 @@ import React, { useContext, useState, useEffect, createRef } from 'react'; import NavBar from 'src/components/NavBar'; import { Link, navigate } from 'gatsby'; import ErrorBot from 'src/images/error.png'; +import { isMobile, isTablet } from 'react-device-detect'; function BotView() { + //redirect to home if in mobile/tablet + useEffect(() => { + if (isMobile || isTablet) { + navigate('/tezos'); + } + }); return ( <> diff --git a/src/pages/tezos/customizebot.js b/src/pages/tezos/customizebot.js index 955c2611..3edc2bd4 100644 --- a/src/pages/tezos/customizebot.js +++ b/src/pages/tezos/customizebot.js @@ -6,6 +6,7 @@ import React, { useContext, } from 'react'; import Loadable from 'react-loadable'; +import { isMobile, isTablet } from 'react-device-detect'; import NavBar from '../../components/NavBar'; import Button from '../../components/Buttons'; import { ThanosWallet } from '@thanos-wallet/dapp'; @@ -474,7 +475,6 @@ const Customizer = ({ location }) => { }, }); - function uploadData() { upload3dModel( state.items.head, @@ -484,6 +484,13 @@ const Customizer = ({ location }) => { ); } + //redirect to home if in mobile/tablet + useEffect(() => { + if (isMobile || isTablet) { + navigate('/tezos'); + } + }); + const [isTourOpen, setIsTourOpen] = useState(true); //persist tour to local storage diff --git a/src/pages/tezos/index.js b/src/pages/tezos/index.js index ea7834a9..259da887 100644 --- a/src/pages/tezos/index.js +++ b/src/pages/tezos/index.js @@ -4,6 +4,10 @@ import NavBar from '../../components/NavBar'; import Button from '../../components/Buttons'; import Footer from '../../components/Footer'; import PlayButton from '../../components/LandingPage/playbutton'; +import TestimonialCard from 'src/components/TestimonialCard'; +import FeatureGrid from 'src/components/FeatureGrid'; + +import MobileHome from 'src/components/Mobile'; import hero from '../../images/hero.webp'; import cryptobots from '../../images/cryptobots.png'; @@ -12,72 +16,12 @@ import createCurrency from 'src/assets/videos/anim-create-currency.mp4'; import FinanceIllustration from 'src/assets/wealth.webp'; import { MdClose } from 'react-icons/md'; -const FeatureGrid = ({ - heading, - subtext, - buttontext, - video, - videoType, - order, - padding, - to, -}) => { - return ( -
-
-

- {heading} -

-

{subtext}

- - - {buttontext} - -
-
- -
-
- ); -}; - -const TestimonialCard = ({ link, img, name, username, text }) => { - return ( - - testimonial -

{name}

-

@{username}

-

{text}

- - ); -}; +import { isMobile, isTablet } from 'react-device-detect'; function Landing() { const [videoModal, setVideoModal] = useState(0); + + // const { isMobile } = useDeviceDetect(); function VideoModal() { return (
setVideoModal(0)} - className="h-12 w-12 rounded-full bg-base-500 absolute right-8 top-8 cursor-pointer flex items-center justify-center" + className="h-12 w-12 rounded-full bg-base-500 absolute right-8 top-8 cursor-pointer flex items-center justify-center text-white" >
@@ -104,6 +48,9 @@ function Landing() {
); } + if (isMobile || isTablet) { + return ; + } return (
{videoModal === 1 && ( @@ -174,8 +121,11 @@ function Landing() {

-
- +
+
@@ -194,9 +144,11 @@ function Landing() { course. You even learn how to make your own currency 🤑" buttontext="Become a Blockchain Pro " video={createCurrency} - videoType="webm" + videoType="mp4" to="/tezos/academy" padding="l" + mobileOrder="last" + order="first" />
@@ -214,13 +167,13 @@ function Landing() { {/* testimonials start here */}
-
-
+
+

- Here’s what people say
about us + Here’s what people say about us

-
+
{ const [forSale, updateForSale] = useState(true); @@ -25,6 +26,12 @@ const Marketplace = () => { const [user] = useAtom(userAtom); const [isUser] = useAtom(isUserAtom); + //redirect to home if in mobile/tablet + useEffect(() => { + if (isMobile || isTablet) { + navigate('/tezos'); + } + }); const allNFTS = useAsync(async () => { try { const combined = await fetchAllNfts(); diff --git a/src/pages/tezos/profile.js b/src/pages/tezos/profile.js index 985e0f24..61c05254 100644 --- a/src/pages/tezos/profile.js +++ b/src/pages/tezos/profile.js @@ -14,6 +14,8 @@ import { useAtom } from 'jotai'; import { getXTZPrice, getNftInfoByXTZAddress } from 'src/utils/indexer'; +import { isMobile, isTablet } from 'react-device-detect'; + import model from 'src/images/Col-1.png'; import add_img from 'src/images/add.png'; @@ -51,6 +53,12 @@ function Profile() { const [user, setUser] = useAtom(userAtom); const [isUser] = useAtom(isUserAtom); + //redirect to home if in mobile/tablet + useEffect(() => { + if (isMobile || isTablet) { + navigate('/tezos'); + } + }); useEffect(() => { console.log(user, isUser); if (!isUser || !user?.verified) { @@ -214,7 +222,8 @@ function Profile() {
Error: {ownedBots.error.message}
) : (
- {ownedBots.value && ownedBots.value.filter(el => el.isForSale === true) + {ownedBots.value && + ownedBots.value.filter(el => el.isForSale === true) .length > 0 ? ( ownedBots.value .filter(el => el.isForSale === true) diff --git a/src/pages/tezos/transaction.js b/src/pages/tezos/transaction.js index 4f7db836..72a7e3ac 100644 --- a/src/pages/tezos/transaction.js +++ b/src/pages/tezos/transaction.js @@ -18,6 +18,7 @@ import ErrorBot from 'src/images/error.png'; import userAtom from 'src/atoms/user-atom'; import isUserAtom from 'src/atoms/is-user-atom'; import { useAtom } from 'jotai'; +import { isMobile, isTablet } from 'react-device-detect'; const Steppers = ({ number, name, clickEvent, tick = false }) => { return ( @@ -145,6 +146,13 @@ function Transaction({ location }) { const [claimButtonDisabled, setClaimButtonDisabledStatus] = useState(true); + //redirect to home if in mobile/tablet + useEffect(() => { + if (isMobile || isTablet) { + navigate('/tezos'); + } + }); + const ErrorModal = () => { return (