+
);
}
diff --git a/src/Assets/About1 (1).png b/src/Assets/About1 (1).png
new file mode 100644
index 0000000..8f439fe
Binary files /dev/null and b/src/Assets/About1 (1).png differ
diff --git a/src/Assets/aaa.jpg b/src/Assets/aaa.jpg
new file mode 100644
index 0000000..8f439fe
Binary files /dev/null and b/src/Assets/aaa.jpg differ
diff --git a/src/Assets/aakala.jpg b/src/Assets/aakala.jpg
new file mode 100644
index 0000000..1c55a99
Binary files /dev/null and b/src/Assets/aakala.jpg differ
diff --git a/src/Assets/gaire.jpg b/src/Assets/gaire.jpg
new file mode 100644
index 0000000..46b82bf
Binary files /dev/null and b/src/Assets/gaire.jpg differ
diff --git a/src/Assets/jake.jpg b/src/Assets/jake.jpg
new file mode 100644
index 0000000..eb0e767
Binary files /dev/null and b/src/Assets/jake.jpg differ
diff --git a/src/Assets/lex.jpg b/src/Assets/lex.jpg
new file mode 100644
index 0000000..733e2d0
Binary files /dev/null and b/src/Assets/lex.jpg differ
diff --git a/src/Assets/neil.jpg b/src/Assets/neil.jpg
new file mode 100644
index 0000000..e467dfe
Binary files /dev/null and b/src/Assets/neil.jpg differ
diff --git a/src/Components/Footer/index.jsx b/src/Components/Footer/index.jsx
index ebc7eec..f8ed2f9 100644
--- a/src/Components/Footer/index.jsx
+++ b/src/Components/Footer/index.jsx
@@ -1,57 +1,67 @@
import React from "react";
import "remixicon/fonts/remixicon.css";
+import "./styles/style.css";
-export default function Footer() {
+export default function Footer({ lightMode }) {
return (
-
-
Website Last Updated: May 17, 2022
- -
-
-
+ ++ Website Last Updated: May 17, 2022 ++
-
+
- -
- +
- -
- +
- -
- +
- -
- +
-
diff --git a/src/Components/Footer/styles/style.css b/src/Components/Footer/styles/style.css
index e69de29..10caeb9 100644
--- a/src/Components/Footer/styles/style.css
+++ b/src/Components/Footer/styles/style.css
@@ -0,0 +1 @@
+.footer__container.lightMode{background:#fff;color:#000}.footer__container.darkMode{color:#fff}.footer__container .update.lightMode{background:#fff;color:#000}.footer__container .update.darkMode{background:#000;color:#fff}.footer__container .social__links.lightMode{background:#fff;color:#000}.footer__container .social__links.darkMode{background:#000;color:#fff}
\ No newline at end of file
diff --git a/src/Components/Footer/styles/style.scss b/src/Components/Footer/styles/style.scss
index e69de29..26f1438 100644
--- a/src/Components/Footer/styles/style.scss
+++ b/src/Components/Footer/styles/style.scss
@@ -0,0 +1,31 @@
+.footer__container {
+ &.lightMode {
+ background: #fff ;
+ color: #000 ;
+ }
+ &.darkMode {
+ // background: #000 ;
+ color: #fff ;
+ }
+ .update {
+ &.lightMode {
+ background: #fff ;
+ color: #000 ;
+ }
+ &.darkMode {
+ background: #000 ;
+ color: #fff ;
+ }
+
+ }
+ .social__links{
+ &.lightMode {
+ background: #fff;
+ color: #000;
+ }
+ &.darkMode {
+ background: #000 ;
+ color: #fff;
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/Components/Navbar/index.jsx b/src/Components/Navbar/index.jsx
index 4402f9d..082cafa 100644
--- a/src/Components/Navbar/index.jsx
+++ b/src/Components/Navbar/index.jsx
@@ -1,9 +1,59 @@
import "./styles/style.css";
import React from "react";
-import Marquee from "react-fast-marquee";
+// import Marquee from "react-fast-marquee";
+import { Switch } from "@mui/material";
+import { styled } from "@mui/material/styles";
+import FormControlLabel from "@mui/material/FormControlLabel";
-function Navbar({ refs }) {
+const MaterialUISwitch = styled(Switch)(({ theme }) => ({
+ width: 62,
+ height: 34,
+ padding: 7,
+ "& .MuiSwitch-switchBase": {
+ margin: 1,
+ padding: 0,
+ transform: "translateX(6px)",
+ "&.Mui-checked": {
+ color: "#fff",
+ transform: "translateX(22px)",
+ "& .MuiSwitch-thumb:before": {
+ backgroundImage: `url('data:image/svg+xml;utf8,')`,
+ },
+ "& + .MuiSwitch-track": {
+ opacity: 1,
+ backgroundColor: theme.palette.mode === "dark" ? "#8796A5" : "#aab4be",
+ },
+ },
+ },
+ "& .MuiSwitch-thumb": {
+ backgroundColor: theme.palette.mode === "dark" ? "#003892" : "#001e3c",
+ width: 32,
+ height: 32,
+ "&:before": {
+ content: "''",
+ position: "absolute",
+ width: "100%",
+ height: "100%",
+ left: 0,
+ top: 0,
+ backgroundRepeat: "no-repeat",
+ backgroundPosition: "center",
+ backgroundImage: `url('data:image/svg+xml;utf8,')`,
+ },
+ },
+ "& .MuiSwitch-track": {
+ opacity: 1,
+ backgroundColor: theme.palette.mode === "dark" ? "#8796A5" : "#aab4be",
+ borderRadius: 20 / 2,
+ },
+}));
+
+function Navbar({ refs, lightMode, setLightMode, handleLightMode }) {
const {
HomeRef,
AboutRef,
@@ -13,45 +63,20 @@ function Navbar({ refs }) {
GalleryRef,
DocumentsRef,
} = refs;
-
+ // console.log(ref)
const scrollToElement = (ref) =>
window.scrollTo({ top: ref.current.offsetTop - 50, behavior: "smooth" });
+ // window.scrollTo(
+ // ref.curren === "HomeRef"
+ // ? { top: window.top }
+ // : { top: ref.current.offset - 50 }
+ // );
return (
- -- --++scrollToElement(HomeRef)} className="navbar__logo">-
Playpoint
-- + diff --git a/src/Components/Navbar/styles/style.css b/src/Components/Navbar/styles/style.css index 6d09d64..53bbc48 100644 --- a/src/Components/Navbar/styles/style.css +++ b/src/Components/Navbar/styles/style.css @@ -10,6 +10,15 @@ background: linear-gradient(to left, #7463b1, #317db0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } +.nav__container .topbar__container.lightMode { + background: #262626 !important; + color: #fff !important; +} +.nav__container .topbar__container.darkMode { + background: #fff !important; + color: #000 !important; + border-bottom: 1px solid #B6B6B6; +} .nav__container .topbar__container .marquee-container .overlay { display: none; } @@ -43,6 +52,14 @@ backdrop-filter: blur(10px); z-index: 5; } +.nav__container .navbar__container.lightMode { + background: #262626 !important; + color: #fff !important; +} +.nav__container .navbar__container.darkMode { + background: #fff !important; + color: #000 !important; +} .nav__container .navbar__container .navbar__logo { display: -webkit-box; display: -ms-flexbox; @@ -87,6 +104,14 @@ cursor: pointer; font-size: 16px; } +.nav__container .navbar__container .navbar__links button.lightMode { + background: #262626 !important; + color: #fff !important; +} +.nav__container .navbar__container .navbar__links button.darkMode { + background: #fff !important; + color: #000 !important; +} .nav__container .navbar__container .navbar__app { border: 1px solid #fff; border-radius: 10px; @@ -95,11 +120,25 @@ transition: 0.3s all ease; cursor: pointer; } +.nav__container .navbar__container .navbar__app.lightMode { + border: 1px solid #000; +} .nav__container .navbar__container .navbar__app a { - color: #fff; text-decoration: none; } -.nav__container .navbar__container .navbar__app:hover { - background-color: #5308f7; +.nav__container .navbar__container .navbar__app a.lightMode { + color: #000; + background: none; +} +.nav__container .navbar__container .navbar__app a.darkMode { color: #fff; -} \ No newline at end of file +} +.nav__container .navbar__container .navbar__app.darkMode:hover { + background-color: #5308f7; + color: #fff !important; +} +.nav__container .navbar__container .navbar__app.lightMode:hover { + background-color: #fff; + color: #5308f7 !important; +} +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/Components/Navbar/styles/style.css.map b/src/Components/Navbar/styles/style.css.map new file mode 100644 index 0000000..b2094d4 --- /dev/null +++ b/src/Components/Navbar/styles/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAoBE;EACE,gBAAA;EACA,WAAA;EACA,cAAA;EACA,mCAAA;EACA,mBAAA;EAAqB,8BAAA;EAKlB,+BAAA;EACH,qFAAA;EAAA,sDAAA;EAIG,qEAAA;ACxBP;AD0BI;EAvBF,8BAAA;EACA,sBAAA;ACAF;ADyBI;EA/BF,2BAAA;EACA,sBAAA;EAgCI,gCAAA;ACtBN;AD0BM;EACE,aAAA;ACxBR;AD4BQ;EACE,cAAA;EACA,iBAAA;AC1BV;ADgCE;EACE,eAAA;EACA,mCAAA;EACA,MAAA;EACA,OAAA;EACA,gBAAA;EACA,WAAA;EACA,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,8BAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA;EACA,iBAAA;EACA,WAAA;EACA,kCAAA;EACA,eAAA;EACA,gBAAA;EACA,2CAAA;EACA,mCAAA;UAAA,2BAAA;EACA,UAAA;AC9BJ;AD+BI;EA/DF,8BAAA;EACA,sBAAA;ACmCF;AD+BI;EAxEF,2BAAA;EACA,sBAAA;AC4CF;AD+BI;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA;EACA,8BAAA;EAAA,6BAAA;MAAA,uBAAA;UAAA,mBAAA;EACA,eAAA;AC7BN;AD+BM;EACE,WAAA;EACA,sBAAA;KAAA,mBAAA;EACA,kBAAA;AC7BR;ADgCM;EACE,iBAAA;AC9BR;ADmCI;EACE,oBAAA;EAAA,oBAAA;EAAA,aAAA;EACA,yBAAA;MAAA,sBAAA;UAAA,mBAAA;ACjCN;ADmCM;EAJF;IAKI,aAAA;EChCN;AACF;ADkCM;EACE,WAAA;EACA,qBAAA;EACA,cAAA;EACA,gBAAA;EACA,YAAA;EACA,eAAA;EACA,eAAA;AChCR;ADiCQ;EAzGN,8BAAA;EACA,sBAAA;AC2EF;ADiCQ;EAlHN,2BAAA;EACA,sBAAA;ACoFF;ADmCI;EACE,sBAAA;EACA,mBAAA;EACA,kBAAA;EACA,iCAAA;EAAA,yBAAA;EACA,eAAA;ACjCN;ADkCM;EACE,sBAAA;AChCR;ADmCM;EAEE,qBAAA;AClCR;ADmCQ;EACE,WAAA;EACA,gBAAA;ACjCV;ADmCQ;EACE,WAAA;ACjCV;ADqCM;EACE,yBAAA;EACA,sBAAA;ACnCR;ADqCM;EACE,sBAAA;EACA,yBAAA;ACnCR","file":"style.css"} \ No newline at end of file diff --git a/src/Components/Navbar/styles/style.scss b/src/Components/Navbar/styles/style.scss index 4eb1ede..a097ee0 100644 --- a/src/Components/Navbar/styles/style.scss +++ b/src/Components/Navbar/styles/style.scss @@ -1,4 +1,23 @@ +$darkBackground:#262626; +$darkColor:#000; + +$lightBackground:#fff; +$lightColor:#fff; + +$darkMode:true; + +@mixin lightMode { + background: $lightBackground !important; + color: $darkColor !important; +} + +@mixin darkMode { + background: $darkBackground !important; + color: $lightColor !important; +} + .nav__container { + .topbar__container { margin-top: 75px; color: #fff; @@ -16,6 +35,14 @@ #317db0 ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + &.lightMode{ + @include darkMode() + } + &.darkMode{ + @include lightMode(); + border-bottom:1px solid #B6B6B6; + } + .marquee-container { .overlay { display: none; @@ -48,6 +75,13 @@ background-color: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); z-index: 5; + &.lightMode { + @include darkMode() + } + + &.darkMode { + @include lightMode() + } .navbar__logo { display: flex; @@ -63,6 +97,7 @@ p { font-weight: bold; + // color: "000"; } } @@ -82,6 +117,13 @@ border: none; cursor: pointer; font-size: 16px; + &.lightMode { + @include darkMode() + } + + &.darkMode { + @include lightMode() + } } } @@ -91,16 +133,31 @@ padding: 10px 20px; transition: 0.3s all ease; cursor: pointer; + &.lightMode { + border: 1px solid #000; + } a { - color: #fff; + // color: #fff; text-decoration: none; + // &.lightMode { + // color: #000; + // background: none; + // } + &.darkMode { + color: #fff; + } } - &:hover { + &.darkMode:hover{ background-color: #5308f7; - color: #fff; + color: #fff !important; + } + &.lightMode:hover{ + background-color: #fff; + color: #5308f7 !important; } } } } + diff --git a/src/Components/Team/index.jsx b/src/Components/Team/index.jsx new file mode 100644 index 0000000..19ed234 --- /dev/null +++ b/src/Components/Team/index.jsx @@ -0,0 +1,23 @@ +import React from "react"; + +function index() { + return ( +++ ); +} + +export default index; diff --git a/src/Components/Team/styles/style.scss b/src/Components/Team/styles/style.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/Pages/Home/components/Faqs.jsx b/src/Pages/Home/components/Faqs.jsx index f6ebb08..74b9f81 100644 --- a/src/Pages/Home/components/Faqs.jsx +++ b/src/Pages/Home/components/Faqs.jsx @@ -5,19 +5,26 @@ import AccordionDetails from "@mui/material/AccordionDetails"; import Typography from "@mui/material/Typography"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; -function Faqs() { +function Faqs({ lightMode }) { return (++Meet Our Team
+++++
+ Suraj Gaire
+Student Researcher
+} + expandIcon={ + + } aria-controls="faq1-content" id="faq1-header" > - Is PPTT, the native token, a cryptocurrency? ++ Is PPTT, the native token, a cryptocurrency? + - + Technically, PPTT is a fungible token on the Avalanche Ecosystem, similar to any ARC20 Token or Currency. However, PPTT can be used as a utility and a tradable token. This means it can be used inside @@ -29,14 +36,21 @@ function Faqs() { } + expandIcon={ + + } aria-controls="faq2-content" id="faq2-header" > - Does Playpoint offer Staking? ++ Does Playpoint offer Staking? + - + Playpoint offers staking PPTT as a method of rewarding community members for locking up their PPTT Tokens for long-term. The user can participate in an online prediction pool game soon, earn PPTT after @@ -46,14 +60,21 @@ function Faqs() { } + expandIcon={ + + } aria-controls="faq3-content" id="faq3-header" > - What are Variant Prediction Pools? ++ What are Variant Prediction Pools? + - + A Playpoint prediction pool is a virtual venue where a group of participants compete amongst each other on the basis of prediction outcomes of a commonly selected match. Of the variant Playpoint @@ -67,14 +88,21 @@ function Faqs() { } + expandIcon={ + + } aria-controls="faq4-content" id="faq4-header" > - What is a Community Hub? ++ What is a Community Hub? + - + The Community Hub is a continuously evolving community platform that will evolve and expand as adoption increases. Gamers can launch games, socialize, get up to speed about new releases and other @@ -89,14 +117,21 @@ function Faqs() { } + expandIcon={ + + } aria-controls="faq5-content" id="faq5-header" > - How can I stay updated about Playpoint? ++ How can I stay updated about Playpoint? + - + Join Playpoint's Discord and Twitter for frequent updates. Playpoint also maintains a presence on Telegram. @@ -104,14 +139,21 @@ function Faqs() {} + expandIcon={ + + } aria-controls="faq6-content" id="faq6-header" > - How do I play on Playpoint? ++ How do I play on Playpoint? + - + For broader advice on game strategy, we'll maintain network of broadcasters who make content about how to play the game. Above all, we are a community full of awesome, friendly players who love @@ -122,17 +164,22 @@ function Faqs() { } + expandIcon={ + + } aria-controls="faq7-content" id="faq7-header" > - + How many Games are you supporting to predict on your platform and if I want to predict anything, what is the process of it?{" "} - + Initially the game will be based on football games prediction. But as you know we are an online prediction pool platform based on real-time sporting events, we will add all popular sports. The game @@ -142,18 +189,25 @@ function Faqs() { } + expandIcon={ + + } aria-controls="faq8-content" id="faq8-header" + className={`${lightMode ? "lightMode" : "darkMode"}`} + color={lightMode ? "#000" : "#fff"} > - + What is your Game going to be like? Because I think Playpoint is putting money into 1 pool and see what team wins in sporting events then take the money. Very like betting. - + The game will be a very simple challenge game where players can challenge other players for the outcome based on a series of questions and answers. @@ -162,18 +216,24 @@ function Faqs() { } + expandIcon={ + + } aria-controls="faq9-content" id="faq9-header" + className={`${lightMode ? "lightMode" : "darkMode"}`} > - + Can you tell me how any of the users can know about the giveaways or any airdrops announcement? Tell us so the users can follow that account or join it. - + We will be running an airdrop campaign in the future and you can find the details about it in our social media handles. So make sure to follow us on twitter, telegram and discord. @@ -182,16 +242,21 @@ function Faqs() { } + expandIcon={ + + } aria-controls="faq10-content" id="faq10-header" > - + Are Playpoint games suitable for adults or only limited to children? - diff --git a/src/Pages/Home/components/Timeline.jsx b/src/Pages/Home/components/Timeline.jsx index 5498962..fbd0d6a 100644 --- a/src/Pages/Home/components/Timeline.jsx +++ b/src/Pages/Home/components/Timeline.jsx @@ -6,7 +6,7 @@ import TimelineConnector from "@mui/lab/TimelineConnector"; import TimelineContent from "@mui/lab/TimelineContent"; import TimelineDot from "@mui/lab/TimelineDot"; -function TimelineContainer() { +function TimelineContainer({ lightMode }) { return (+ The game is intended to be suitable for anyone above the age of 18. = 992 ? "alternate" : "right"}> @@ -16,27 +16,38 @@ function TimelineContainer() { - Quarter 1: Apr-Jun
-++ Quarter 1: Apr-Jun +
+@@ -62,11 +74,15 @@ function TimelineContainer() {-
-
- - 1.1 Project Landing Page Introduction +
-
+
+ 1.1 Project Landing Page Introduction{" "}
+
Landing Page will be live on both centralized(Google Firebase), and decentralized(IPFS) hosting platforms, thus no technical faults keeps gamers, users, investors, and traders away from updates and informations.
- - - 1.2 Build Community & Build Connections +
-
+
+ 1.2 Build Community & Build Connections
+
Partnerships, Brand Advocations with existing decentralized platforms for playpoint's betterment and support.
- - - 1.3 Pre, Private-Token Sale +
-
+
+ 1.3 Pre, Private-Token Sale
+
- The pre and private token sales has started and is live on {" "} + The pre and private token sales has started and is live on{" "} https://sale.playpoint.ai/ - . Minimum investment starts from 3 AVAX. Contact us for - more details at info@playpoint.ai. + + . Minimum investment starts from 3 AVAX. Contact us for more + details at info@playpoint.ai.
- Quarter 2: Jul-Sep
++ Quarter 2: Jul-Sep +
-
-
- - 2.1 Crowdsale, Token Deployment & CEX, DEX Listings +
-
+
+ 2.1 Crowdsale, Token Deployment & CEX, DEX Listings{" "}
+
Our first priority for Q2 is to launch a successful{" "} #1 Crowd Sale @@ -74,16 +90,20 @@ function TimelineContainer() { be working on having smart contracts audited and ready to be accessed by the traders of our community.
- - - 2.2 Staking & Liquidity Platform +
-
+
+ 2.2 Staking & Liquidity Platform
+
Staking & Liquidity platform will be introduced to{" "} #2 investors with cross-bridge chain supports( Note: Base Network will still be Avalanche Ecosystem.).
- - - 2.3 Viable Product(VP) Gaming/Prediction Platform +
-
+
+ 2.3 Viable Product(VP) Gaming/Prediction Platform
+
As a Play to Earn (P2E) focused website, by the end of Q2, we will have launched the #3 Viable Platform-VP for @@ -99,7 +119,7 @@ function TimelineContainer() {- +
Q3-Loading . diff --git a/src/Pages/Home/index.jsx b/src/Pages/Home/index.jsx index 5b6234c..1407b6c 100644 --- a/src/Pages/Home/index.jsx +++ b/src/Pages/Home/index.jsx @@ -7,7 +7,18 @@ import "animate.css"; import React from "react"; import { Button } from "@mui/material"; import Marquee from "react-fast-marquee"; -import Popup from "reactjs-popup"; +import lex from "../../Assets/lex.jpg" +import aakala from "../../Assets/aakala.jpg" +import jake from "../../Assets/jake.jpg" +import neil from "../../Assets/neil.jpg" +// import gaire from "../../Assets/gaire.jpg" + + + + +// import Popup from "reactjs-popup"; +// import About from "../../Assets/About1(1).png" +// import image from "../../Assets/About1(1).png" /** * @components custom main components @@ -19,7 +30,7 @@ import Footer from "../../Components/Footer"; // import PolarChart from "./components/PolarChart"; // import BannerImage from "../../Assets/Banner.png"; -function Home() { +function Home({ lightMode, setLightMode, handleLightMode }) { // refs const HomeRef = React.useRef(); const AboutRef = React.useRef(); @@ -38,29 +49,13 @@ function Home() { }; return ( -
-- - +Message from Playpoint 🔺
-
-- Pre-Private Sale has started from 16th May till end of May 2022. -
-
- Visit{" "} - - https://sale.playpoint.ai/ - {" "} - for presale investment. -+{/** * @section => landing @@ -93,7 +88,12 @@ function Home() { {/** * @section => about */} - +@@ -103,31 +103,58 @@ function Home() { _ -{/** @@ -419,18 +452,29 @@ function Home() { {/** * @section => documents */} --Playpoint
++-+ Playpoint +
- is an online Play to Earn (P2E) and{" "} - prediction-pool platform, based on real-time sporting - events. It is supported by - decentralized blockchain network and its primary network - comprises: +
+ is an online{" "} + + Play to Earn (P2E) + {" "} + and{" "} + + prediction-pool platform + + , based on real-time sporting events. It is supported by + + {" "} + decentralized blockchain network + {" "} + and its primary network comprises:
--
-
- Logical Marketplace -
- Virtual Showcase Vendor, -
- Prediction Questionnaire Hub, and -
- Variant Prediction Pools. +
- + Logical Marketplace{" "} + +
- + Virtual Showcase Vendor, + +
- + Prediction Questionnaire Hub, and{" "} + +
- + Variant Prediction Pools.{" "} +
-
+
The participants - acquiring the highest score range, in percentage, become prize - contenders. ++ The affiliated participants can take part in the prediction pool + sweepstakes by selecting a match or matches (fixtures) + prescribed in the{" "} + + Playpoint Showcase + + . After the selection, the participant must ultimately answer + the questions based on their predictions for the said match. + These questions are assessed or set up by the + + {" "} + Playpoint Questionnaires hub + + .
The participants acquiring the highest score range, in + percentage, become prize contenders. +@@ -174,7 +201,9 @@ function Home() { : "https://ik.imagekit.io/lexworld/About1.png?tr=w-280.797,h-109.641" } alt="About" - className="absolute__icon" + className={`absolute__icon ${ + lightMode ? "lightMode" : "darkMode" + }`} width={ window.innerWidth >= 1920 || (window.innerWidth <= 1920 && window.innerWidth > 992) @@ -318,18 +347,22 @@ function Home() {-Roadmap_
Roadmap_
+
Roadmap _
-+
Playpoint will continue to grow with new features, systems, and cross-chain expansions. The roadmap below indicates the expected milestones in development.
-+ +); } diff --git a/src/Pages/Home/styles/style.css b/src/Pages/Home/styles/style.css index 5f57b0c..0111150 100644 --- a/src/Pages/Home/styles/style.css +++ b/src/Pages/Home/styles/style.css @@ -1 +1,1057 @@ -@-webkit-keyframes glow{0%{text-shadow:0 0 0 #2a2a2a,0 0 5px #2a2a2a,0 0 10px #3c2184,0 0 20px #3c2184,0 0 50px #3c2184,0 0 60px #3c2184,0 0 70px #3c2184}to{text-shadow:0 0 10px #575757,0 0 20px #353535,0 0 30px #5739a8,0 0 50px #5739a8,0 0 60px #5739a8,0 0 70px #5739a8,0 0 80px #5739a8}}@keyframes glow{0%{text-shadow:0 0 0 #2a2a2a,0 0 5px #2a2a2a,0 0 10px #3c2184,0 0 20px #3c2184,0 0 50px #3c2184,0 0 60px #3c2184,0 0 70px #3c2184}to{text-shadow:0 0 10px #575757,0 0 20px #353535,0 0 30px #5739a8,0 0 50px #5739a8,0 0 60px #5739a8,0 0 70px #5739a8,0 0 80px #5739a8}}.home__container{margin-top:70px;position:relative}.home__container p{line-height:1.5}.home__container .home__container__landing{width:100vw;-o-object-fit:contain;object-fit:contain}@media (max-width:768px){.home__container .home__container__landing{margin-top:95px;-webkit-transform:scale(2.2);transform:scale(2.2)}}.home__container .home__container__about{color:#fff;padding:0 5vw}@media (max-width:768px){.home__container .home__container__about{margin-top:105px}}.home__container .home__container__about .absolute__title{font-family:"Fira Code",monospace;font-size:8em;opacity:0.3;-webkit-text-fill-color:#000;-webkit-text-stroke-width:4px;-webkit-text-stroke-color:#fff}@media (max-width:768px){.home__container .home__container__about .absolute__title{font-size:4em;-webkit-text-stroke-width:2px}}.home__container .home__container__about .title{font-family:"Fira Code",monospace}.home__container .home__container__about .home__container__about__content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-width:992px){.home__container .home__container__about .home__container__about__content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.home__container .home__container__about .home__container__about__content .description,.home__container .home__container__about .home__container__about__content .icon{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}@media (max-width:992px){.home__container .home__container__about .home__container__about__content .description,.home__container .home__container__about .home__container__about__content .icon{-webkit-box-flex:1;-ms-flex:1;flex:1}}.home__container .home__container__about .home__container__about__content .description .title{font-size:1.5em;margin-bottom:20px}.home__container .home__container__about .home__container__about__content .description .title .stroke{-webkit-text-fill-color:#000;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#fff;font-family:"Roboto",sans-serif}@media (max-width:768px){.home__container .home__container__about .home__container__about__content .description .title{font-size:1em}}.home__container .home__container__about .home__container__about__content .description p{font-family:"Roboto",sans-serif;font-size:18px;line-height:1.6;color:#c3c3c3}.home__container .home__container__about .home__container__about__content .description p b{color:#fff}.home__container .home__container__about .home__container__about__content .description p ol{margin:20px}.home__container .home__container__about .home__container__about__content .icon{position:relative}@media (max-width:992px){.home__container .home__container__about .home__container__about__content .icon{margin-top:50px}}@media (max-width:992px){.home__container .home__container__about .home__container__about__content .icon{margin-top:30px}}.home__container .home__container__about .home__container__about__content .icon img{width:70%;-o-object-fit:contain;object-fit:contain;display:block;margin:0 auto;z-index:1}@media (max-width:768px){.home__container .home__container__about .home__container__about__content .icon img{width:80%}}.home__container .home__container__about .home__container__about__content .icon img.absolute__icon{position:absolute;bottom:0;right:0;z-index:-1;opacity:0.5}@media (max-width:992px){.home__container .home__container__about .home__container__about__content .icon img.absolute__icon{right:50px}}@media (max-width:768px){.home__container .home__container__about .home__container__about__content .icon img.absolute__icon{right:10px}}.home__container .home__container__tokenSale{background-size:cover;margin:90px 5vw;border-radius:15px}@media (max-width:768px){.home__container .home__container__tokenSale{margin:50px 5vw}}.home__container .home__container__tokenSale .title h1{font-family:"Fira Code",monospace;font-size:5em;opacity:0.3;-webkit-text-fill-color:#000;-webkit-text-stroke-width:4px;-webkit-text-stroke-color:#fff;text-align:center}@media (max-width:768px){.home__container .home__container__tokenSale .title h1{font-size:2.5em;-webkit-text-stroke-width:2px}}.home__container .home__container__tokenSale .content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-width:992px){.home__container .home__container__tokenSale .content{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}}@media (max-width:768px){.home__container .home__container__tokenSale .content{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}}.home__container .home__container__tokenSale .content .content__description,.home__container .home__container__tokenSale .content .content__video{color:#fff}.home__container .home__container__tokenSale .content .content__video video{width:30vw;-o-object-fit:contain;object-fit:contain}@media (max-width:768px){.home__container .home__container__tokenSale .content .content__video video{width:80vw}}.home__container .home__container__tokenSale .content .content__description{margin-left:50px;font-size:18px;font-family:"Roboto",sans-serif;color:#c3c3c3}.home__container .home__container__tokenSale .content .content__description b{color:#fff}@media (max-width:768px){.home__container .home__container__tokenSale .content .content__description{margin-left:0}}.home__container .home__container__tokenSale .content .content__description .stroke__colored{-webkit-text-fill-color:#000;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#6f48d8;font-size:2.5em}@media (max-width:768px){.home__container .home__container__tokenSale .content .content__description .stroke__colored{font-size:2em}}.home__container .home__container__tokenSale .content .content__description .heading{font-size:3em;margin-bottom:20px}@media (max-width:768px){.home__container .home__container__tokenSale .content .content__description .heading{font-size:2.5em}}.home__container .home__container__tokenSale .content .content__description ul{display:-webkit-box;display:-ms-flexbox;display:flex;margin-top:30px;list-style-type:disc;margin-bottom:30px;-ms-flex-wrap:wrap;flex-wrap:wrap}@media (max-width:768px){.home__container .home__container__tokenSale .content .content__description ul{margin-left:35px}}.home__container .home__container__tokenSale .content .content__description ul li{margin-right:50px}.home__container .home__container__tokenSale .content .content__description .marketing{opacity:0.4}.home__container .home__container__tokenSale .tokenEconomics{margin-top:90px;color:#fff;display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center}@media (max-width:992px){.home__container .home__container__tokenSale .tokenEconomics{-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}@media (max-width:768px){.home__container .home__container__tokenSale .tokenEconomics{margin:50px 5vw}}.home__container .home__container__tokenSale .tokenEconomics .absolute__title{position:absolute;opacity:0.1;top:5vh;right:50%;font-size:3em;z-index:1}@media (max-width:768px){.home__container .home__container__tokenSale .tokenEconomics .absolute__title{font-size:2em;left:10%}}.home__container .home__container__tokenSale .tokenEconomics .absolute__title h1{-webkit-text-fill-color:#000;-webkit-text-stroke-width:4px;-webkit-text-stroke-color:#fff;font-family:"Fira Code",monospace}@media (max-width:768px){.home__container .home__container__tokenSale .tokenEconomics .absolute__title h1{-webkit-text-stroke-width:2px}}.home__container .home__container__tokenSale .tokenEconomics .chart,.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;max-width:45vw}@media (max-width:992px){.home__container .home__container__tokenSale .tokenEconomics .chart,.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content{-webkit-box-flex:1;-ms-flex:1;flex:1;max-width:100vw;width:100%}}.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content h1{font-size:50px;margin-bottom:20px;font-family:"Fira Code",monospace}.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content h1 .stroke{-webkit-text-fill-color:#000;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#fff}@media (max-width:768px){.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content h1{font-size:35px;margin-bottom:20px}}.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content p{font-family:"Roboto",sans-serif;font-size:19px;color:#c3c3c3}.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content p .highlight{color:#9361ff}.home__container .home__container__tokenSale .tokenEconomics .chart{z-index:2}.home__container .home__container__tokenSale .tokenEconomics .chart canvas{margin-left:50px;max-width:36vw;-o-object-fit:contain;object-fit:contain}@media (max-width:992px){.home__container .home__container__tokenSale .tokenEconomics .chart canvas{margin-left:0;max-width:85vw;width:85vw;margin-top:50px}}.home__container .home__container__roadmap{color:#fff;position:relative;padding:0 5vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:80px}@media (max-width:768px){.home__container .home__container__roadmap{padding:0}}.home__container .home__container__roadmap .absolute__title{position:absolute;opacity:0.1;top:10vh;left:50%;font-size:5em}@media (max-width:768px){.home__container .home__container__roadmap .absolute__title{font-size:2em;left:10%}}.home__container .home__container__roadmap .absolute__title h1{-webkit-text-fill-color:#000;-webkit-text-stroke-width:4px;-webkit-text-stroke-color:#fff;font-family:"Fira Code",monospace}@media (max-width:768px){.home__container .home__container__roadmap .absolute__title h1{-webkit-text-stroke-width:2px}}.home__container .home__container__roadmap .roadmap__title{font-size:50px;margin-bottom:40px;font-family:"Fira Code",monospace}@media (max-width:768px){.home__container .home__container__roadmap .roadmap__title{font-size:35px;margin-bottom:20px}}.home__container .home__container__roadmap p{font-family:"Roboto",sans-serif;font-size:17px}.home__container .home__container__roadmap .top__description{max-width:50vw;margin-bottom:40px;text-align:center;opacity:0.5;font-size:19px}@media (max-width:768px){.home__container .home__container__roadmap .top__description{max-width:80vw}}.home__container .home__container__roadmap .timeline__container .title{font-family:"Fira Code",monospace;margin-bottom:20px;font-size:2.5em}@media (max-width:768px){.home__container .home__container__roadmap .timeline__container .title{font-size:18px;margin-bottom:10px}}.home__container .home__container__roadmap .timeline__container .p{color:#adadad}.home__container .home__container__roadmap .timeline__container .p li{margin-bottom:20px;list-style:none}.home__container .home__container__roadmap .timeline__container .p li b{font-size:19px;line-height:2;color:#fff}.home__container .home__container__roadmap .timeline__container .p li span{color:#00d56a;font-weight:bold}@media (max-width:991px){.home__container .home__container__roadmap .timeline__container .MuiTimelineItem-root:before{-webkit-box-flex:0;-ms-flex:0;flex:0}}.home__container .home__container__gallery{display:block;margin:0 auto;margin-top:120px;width:100%;padding:0 5vw}@media (max-width:768px){.home__container .home__container__gallery{margin-top:50px}}.home__container .home__container__gallery .row{display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;padding:0 5px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.home__container .home__container__gallery .row .column{-ms-flex:25%;-webkit-box-flex:25%;flex:25%;max-width:25%;padding:0 5px}.home__container .home__container__gallery .row .column .image-box{width:100%;position:relative;margin:auto;overflow:hidden;vertical-align:middle;margin-top:10px}.home__container .home__container__gallery .row .column img{width:100%;cursor:pointer;-webkit-transition:all 0.3s ease;transition:all 0.3s ease;display:block;-webkit-transform:scale(1);transform:scale(1)}.home__container .home__container__gallery .row .column img:hover{-webkit-transform:scale(1.1);transform:scale(1.1)}@media screen and (max-width:992px){.home__container .home__container__gallery .row .column{-ms-flex:50%;-webkit-box-flex:50%;flex:50%;max-width:50%}}@media screen and (max-width:768px){.home__container .home__container__gallery .row .column{-ms-flex:100%;-webkit-box-flex:100%;flex:100%;max-width:100%}}.home__container .home__container__documents{color:#fff;margin:100px 5vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;position:relative}@media (max-width:992px){.home__container .home__container__documents{-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}@media (max-width:768px){.home__container .home__container__documents{margin:50px 5vw}}.home__container .home__container__documents .documents__links,.home__container .home__container__documents .faqs{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;font-family:"Roboto",sans-serif}@media (max-width:992px){.home__container .home__container__documents .documents__links,.home__container .home__container__documents .faqs{-webkit-box-flex:1;-ms-flex:1;flex:1}}.home__container .home__container__documents .absolute{position:absolute;font-size:15em;-webkit-text-fill-color:#000;-webkit-text-stroke-width:2px;z-index:-1;top:50%;-webkit-text-stroke-color:#fff;-webkit-transform:translateY(-50%);transform:translateY(-50%);opacity:0.1}.home__container .home__container__documents .overlay{width:0;height:0}.home__container .home__container__documents .faqs h1{font-family:"Fira Code",monospace;font-size:4em}@media (max-width:768px){.home__container .home__container__documents .faqs h1{font-size:2em}}.home__container .home__container__documents .faqs .faq__description{color:#999999;font-size:18px;margin-top:20px}.home__container .home__container__documents .faqs .faqs__container{margin-top:40px}.home__container .home__container__documents .faqs .faqs__container .MuiPaper-root{background:transparent;color:#fff}.home__container .home__container__documents .faqs .faqs__container .MuiAccordionSummary-root{border-top:0.2px solid #dedede}.home__container .home__container__documents .faqs .faqs__container .MuiTypography-root{font-size:18px;font-weight:600}.home__container .home__container__documents .faqs .faqs__container .MuiAccordionDetails-root .MuiTypography-root{font-size:16px;font-weight:400;color:#b9b9b9}.home__container .home__container__documents .faqs .faqs__container .MuiAccordionSummary-expandIconWrapper{color:#fff}.home__container .home__container__documents .documents__links{margin-left:80px;font-size:18px;color:#a7a7a7}@media (max-width:992px){.home__container .home__container__documents .documents__links{margin-left:0;margin-top:50px}}.home__container .home__container__documents .documents__links h1{font-size:4em;-webkit-text-fill-color:#000;-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#fff;font-family:"Fira Code",monospace}@media (max-width:768px){.home__container .home__container__documents .documents__links h1{font-size:2em}}.home__container .home__container__documents .documents__links .MuiButton-root{margin-bottom:20px;background:#000;border:0.5px solid #fff;color:#fff;padding:0}.home__container .home__container__documents .documents__links .MuiButton-root:hover{background:#5308f7}.home__container .home__container__documents .documents__links .MuiButton-root a{padding:0 40px;text-decoration:none;color:#fff}.home__container .home__container__documents .documents__links img{width:100%;border-radius:15px;margin-top:25px;margin-bottom:20px}@media (max-width:768px){.home__container .home__container__documents .documents__links img{width:90vw}}.home__container .home__container__documents .documents__links b{color:#9361ff}.home__container .home__container__documents .documents__links b.content__highlight{color:#fff}.home__container .home__container__documents .documents__links .contractAddr a{color:#fff;text-decoration:none}@media (max-width:768px){.home__container .home__container__documents .documents__links .contractAddr{font-size:14px}}.home__container .footer__container{color:#fff;padding:0 5vw;margin-bottom:50px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap}.home__container .footer__container .update{font-family:"Fira Code",monospace;font-size:18px}.home__container .footer__container ul{display:-webkit-box;display:-ms-flexbox;display:flex;list-style-type:none}@media (max-width:768px){.home__container .footer__container ul{margin-top:20px}}.home__container .footer__container ul a{color:#fff;margin-left:30px;font-size:30px;text-decoration:none} \ No newline at end of file +@-webkit-keyframes glow { + from { + text-shadow: 0 0 0 #2a2a2a, 0 0 5px #2a2a2a, 0 0 10px #3c2184, 0 0 20px #3c2184, 0 0 50px #3c2184, 0 0 60px #3c2184, 0 0 70px #3c2184; + } + to { + text-shadow: 0 0 10px rgb(87, 87, 87), 0 0 20px #353535, 0 0 30px #5739a8, 0 0 50px #5739a8, 0 0 60px #5739a8, 0 0 70px #5739a8, 0 0 80px #5739a8; + } +} +@keyframes glow { + from { + text-shadow: 0 0 0 #2a2a2a, 0 0 5px #2a2a2a, 0 0 10px #3c2184, 0 0 20px #3c2184, 0 0 50px #3c2184, 0 0 60px #3c2184, 0 0 70px #3c2184; + } + to { + text-shadow: 0 0 10px rgb(87, 87, 87), 0 0 20px #353535, 0 0 30px #5739a8, 0 0 50px #5739a8, 0 0 60px #5739a8, 0 0 70px #5739a8, 0 0 80px #5739a8; + } +} +body.lightMode { + background: #fff !important; + color: #000 !important; +} +body.darkMode { + background: #262626 !important; + color: #fff !important; +} + +.home__container { + margin-top: 70px; + position: relative; +} +.home__container p { + line-height: 1.5; +} +.home__container .home__container__landing { + width: 100vw; + -o-object-fit: contain; + object-fit: contain; +} +@media (max-width: 768px) { + .home__container .home__container__landing { + margin-top: 95px; + -webkit-transform: scale(2.2); + transform: scale(2.2); + } +} +.home__container .home__container__about { + color: #fff; + padding: 0 5vw; + margin: 20px 0; + padding: 5px 100px; +} +.home__container .home__container__about.lightMode { + background: #f1f1f1; +} +@media (max-width: 768px) { + .home__container .home__container__about { + margin-top: 105px; + } +} +.home__container .home__container__about .absolute__title { + font-family: "Fira Code", monospace; + font-size: 8em; + opacity: 0.3; + -webkit-text-fill-color: #000; + /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 4px; + -webkit-text-stroke-color: #fff; +} +@media (max-width: 768px) { + .home__container .home__container__about .absolute__title { + font-size: 4em; + -webkit-text-stroke-width: 2px; + } +} +.home__container .home__container__about .title { + font-family: "Fira Code", monospace; +} +.home__container .home__container__about .title h1.lightMode { + color: #000; + background: transparent; +} +.home__container .home__container__about .home__container__about__content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (max-width: 992px) { + .home__container .home__container__about .home__container__about__content { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} +.home__container .home__container__about .home__container__about__content .description, +.home__container .home__container__about .home__container__about__content .icon { + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0; +} +@media (max-width: 992px) { + .home__container .home__container__about .home__container__about__content .description, +.home__container .home__container__about .home__container__about__content .icon { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + } +} +.home__container .home__container__about .home__container__about__content .description .title { + font-size: 1.5em; + margin-bottom: 20px; +} +.home__container .home__container__about .home__container__about__content .description .title .stroke { + -webkit-text-fill-color: #000; + /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #fff; + font-family: "Roboto", sans-serif; +} +@media (max-width: 768px) { + .home__container .home__container__about .home__container__about__content .description .title { + font-size: 1em; + } +} +.home__container .home__container__about .home__container__about__content .description p { + font-family: "Roboto", sans-serif; + font-size: 18px; + line-height: 1.6; + color: #c3c3c3; +} +.home__container .home__container__about .home__container__about__content .description p.lightMode { + background: transparent; + color: #000; +} +.home__container .home__container__about .home__container__about__content .description p.darkMode { + background: transparent; + color: #c3c3c3; +} +.home__container .home__container__about .home__container__about__content .description p b { + color: #fff; +} +.home__container .home__container__about .home__container__about__content .description p b.lightMode { + background: transparent; + color: #000; +} +.home__container .home__container__about .home__container__about__content .description p b.darkMode { + background: transparent; + color: #fff; +} +.home__container .home__container__about .home__container__about__content .description p ol { + margin: 20px; +} +.home__container .home__container__about .home__container__about__content .description p ol.lightMode { + background: transparent; +} +.home__container .home__container__about .home__container__about__content .description p ol li.lightMode { + background: transparent; +} +.home__container .home__container__about .home__container__about__content .icon { + position: relative; +} +@media (max-width: 992px) { + .home__container .home__container__about .home__container__about__content .icon { + margin-top: 50px; + } +} +@media (max-width: 992px) { + .home__container .home__container__about .home__container__about__content .icon { + margin-top: 30px; + } +} +.home__container .home__container__about .home__container__about__content .icon img { + width: 70%; + -o-object-fit: contain; + object-fit: contain; + display: block; + margin: 0 auto; + z-index: 1; +} +@media (max-width: 768px) { + .home__container .home__container__about .home__container__about__content .icon img { + width: 80%; + } +} +.home__container .home__container__about .home__container__about__content .icon img.absolute__icon { + position: absolute; + bottom: 0; + right: 0; + z-index: -1; +} +.home__container .home__container__about .home__container__about__content .icon img.absolute__icon.lightMode { + opacity: 1 !important; +} +.home__container .home__container__about .home__container__about__content .icon img.absolute__icon.darkMode { + opacity: 0.5; +} +@media (max-width: 992px) { + .home__container .home__container__about .home__container__about__content .icon img.absolute__icon { + right: 50px; + } +} +@media (max-width: 768px) { + .home__container .home__container__about .home__container__about__content .icon img.absolute__icon { + right: 10px; + } +} +.home__container .home__container__tokenSale { + background-size: cover; + margin: 90px 5vw; + border-radius: 15px; +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale { + margin: 50px 5vw; + } +} +.home__container .home__container__tokenSale .title h1 { + font-family: "Fira Code", monospace; + font-size: 5em; + opacity: 0.3; + -webkit-text-fill-color: #000; + /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 4px; + -webkit-text-stroke-color: #fff; + text-align: center; +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale .title h1 { + font-size: 2.5em; + -webkit-text-stroke-width: 2px; + } +} +.home__container .home__container__tokenSale .content { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (max-width: 992px) { + .home__container .home__container__tokenSale .content { + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + } +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale .content { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + } +} +.home__container .home__container__tokenSale .content .content__video, +.home__container .home__container__tokenSale .content .content__description { + color: #fff; +} +.home__container .home__container__tokenSale .content .content__video video { + width: 30vw; + -o-object-fit: contain; + object-fit: contain; +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale .content .content__video video { + width: 80vw; + } +} +.home__container .home__container__tokenSale .content .content__description { + margin-left: 50px; + font-size: 18px; + font-family: "Roboto", sans-serif; + color: #c3c3c3; +} +.home__container .home__container__tokenSale .content .content__description b { + color: #fff; +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale .content .content__description { + margin-left: 0; + } +} +.home__container .home__container__tokenSale .content .content__description .stroke__colored { + -webkit-text-fill-color: #000; + /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #6f48d8; + font-size: 2.5em; +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale .content .content__description .stroke__colored { + font-size: 2em; + } +} +.home__container .home__container__tokenSale .content .content__description .heading { + font-size: 3em; + margin-bottom: 20px; +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale .content .content__description .heading { + font-size: 2.5em; + } +} +.home__container .home__container__tokenSale .content .content__description ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + margin-top: 30px; + list-style-type: disc; + margin-bottom: 30px; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale .content .content__description ul { + margin-left: 35px; + } +} +.home__container .home__container__tokenSale .content .content__description ul li { + margin-right: 50px; +} +.home__container .home__container__tokenSale .content .content__description .marketing { + opacity: 0.4; +} +.home__container .home__container__tokenSale .tokenEconomics { + margin-top: 90px; + color: #fff; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + position: relative; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} +@media (max-width: 992px) { + .home__container .home__container__tokenSale .tokenEconomics { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale .tokenEconomics { + margin: 50px 5vw; + } +} +.home__container .home__container__tokenSale .tokenEconomics .absolute__title { + position: absolute; + opacity: 0.1; + top: 5vh; + right: 50%; + font-size: 3em; + z-index: 1; +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale .tokenEconomics .absolute__title { + font-size: 2em; + left: 10%; + } +} +.home__container .home__container__tokenSale .tokenEconomics .absolute__title h1 { + -webkit-text-fill-color: #000; + /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 4px; + -webkit-text-stroke-color: #fff; + font-family: "Fira Code", monospace; +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale .tokenEconomics .absolute__title h1 { + -webkit-text-stroke-width: 2px; + } +} +.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content, +.home__container .home__container__tokenSale .tokenEconomics .chart { + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0; + max-width: 45vw; +} +@media (max-width: 992px) { + .home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content, +.home__container .home__container__tokenSale .tokenEconomics .chart { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + max-width: 100vw; + width: 100%; + } +} +.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content h1 { + font-size: 50px; + margin-bottom: 20px; + font-family: "Fira Code", monospace; +} +.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content h1 .stroke { + -webkit-text-fill-color: #000; + /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #fff; +} +@media (max-width: 768px) { + .home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content h1 { + font-size: 35px; + margin-bottom: 20px; + } +} +.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content p { + font-family: "Roboto", sans-serif; + font-size: 19px; + color: #c3c3c3; +} +.home__container .home__container__tokenSale .tokenEconomics .tokenEconomics__content p .highlight { + color: #9361ff; +} +.home__container .home__container__tokenSale .tokenEconomics .chart { + z-index: 2; +} +.home__container .home__container__tokenSale .tokenEconomics .chart canvas { + margin-left: 50px; + max-width: 36vw; + -o-object-fit: contain; + object-fit: contain; +} +@media (max-width: 992px) { + .home__container .home__container__tokenSale .tokenEconomics .chart canvas { + margin-left: 0; + max-width: 85vw; + width: 85vw; + margin-top: 50px; + } +} +.home__container .home__container__roadmap { + color: #fff; + position: relative; + padding: 0 5vw; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + margin-top: 80px; +} +@media (max-width: 768px) { + .home__container .home__container__roadmap { + padding: 0; + } +} +.home__container .home__container__roadmap .absolute__title { + position: absolute; + opacity: 0.07; + top: 10vh; + left: 50%; + font-size: 5em; +} +@media (max-width: 768px) { + .home__container .home__container__roadmap .absolute__title { + font-size: 2em; + left: 10%; + } +} +.home__container .home__container__roadmap .absolute__title h1 { + -webkit-text-fill-color: #000; + /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 4px; + -webkit-text-stroke-color: #fff; + font-family: "Fira Code", monospace; +} +@media (max-width: 768px) { + .home__container .home__container__roadmap .absolute__title h1 { + -webkit-text-stroke-width: 2px; + } +} +.home__container .home__container__roadmap .roadmap__title { + font-size: 50px; + margin-bottom: 40px; + font-family: "Fira Code", monospace; +} +@media (max-width: 768px) { + .home__container .home__container__roadmap .roadmap__title { + font-size: 35px; + margin-bottom: 20px; + } +} +.home__container .home__container__roadmap .roadmap__title.lightMode { + color: #000; + background: transparent; +} +.home__container .home__container__roadmap .roadmap__title.darkMode { + color: #fff; + background: transparent; +} +.home__container .home__container__roadmap p { + font-family: "Roboto", sans-serif; + font-size: 17px; +} +.home__container .home__container__roadmap .top__description { + max-width: 50vw; + margin-bottom: 40px; + text-align: center; + opacity: 0.5; + font-size: 19px; + color: #fff; +} +.home__container .home__container__roadmap .top__description.lightMode { + color: #000 !important; + background: transparent; + opacity: 1; +} +.home__container .home__container__roadmap .top__description.darkMode { + color: #fff !important; + background: transparent; + opacity: 0.5; +} +@media (max-width: 768px) { + .home__container .home__container__roadmap .top__description { + max-width: 80vw; + } +} +.home__container .home__container__roadmap .timeline__container .title { + font-family: "Fira Code", monospace; + margin-bottom: 20px; + font-size: 2.5em; +} +@media (max-width: 768px) { + .home__container .home__container__roadmap .timeline__container .title { + font-size: 18px; + margin-bottom: 10px; + } +} +.home__container .home__container__roadmap .timeline__container li { + margin-bottom: 20px; + list-style: none; +} +.home__container .home__container__roadmap .timeline__container li.lightMode { + color: #000; + background: transparent !important; +} +.home__container .home__container__roadmap .timeline__container li.darkMode { + background: transparent !important; + color: #fff; +} +.home__container .home__container__roadmap .timeline__container li b { + color: #fff; +} +.home__container .home__container__roadmap .timeline__container li b.lightMode { + background: transparent !important; + color: #000; +} +.home__container .home__container__roadmap .timeline__container li b.darkMode { + background: transparent !important; + color: #fff; +} +@media (max-width: 991px) { + .home__container .home__container__roadmap .MuiTimelineItem-root::before { + -webkit-box-flex: 0; + -ms-flex: 0; + flex: 0; + } +} +.home__container .home__container__team { + margin: 100px 5vw; +} +.home__container .home__container__team.darkMode { + color: #fff; + background: #000; +} +.home__container .home__container__team .home__container__team__content { + width: 100%; +} +.home__container .home__container__team .home__container__team__content h1 { + width: 100%; + -webkit-text-fill-color: #000; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #fff; + font-size: 4em; + font-family: "Fira Code", monospace; + margin-bottom: 20px; +} +@media (max-width: 768px) { + .home__container .home__container__team .home__container__team__content h1 { + font-size: 2.5em; + text-align: center; + } +} +.home__container .home__container__team .home__container__team__content .teams { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +@media (max-width: 768px) { + .home__container .home__container__team .home__container__team__content .teams { + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + } +} +.home__container .home__container__team .home__container__team__content .teams .user { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} +.home__container .home__container__team .home__container__team__content .teams .user.darkMode { + background: #fff !important; + color: #000 !important; +} +.home__container .home__container__team .home__container__team__content .teams .user.lightMode { + color: #000; + background: transparent; +} +.home__container .home__container__team .home__container__team__content .teams .user .imageBox { + border-radius: 16px; + height: 400px; + width: 200px; + overflow: hidden; + margin: 20px 0; +} +@media (max-width: 768px) { + .home__container .home__container__team .home__container__team__content .teams .user .imageBox { + width: 80vw; + } +} +.home__container .home__container__team .home__container__team__content .teams .user .imageBox img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; + cursor: pointer; + -webkit-transform: scale(1); + transform: scale(1); + -webkit-transition: all 0.3s ease-in-out; + transition: all 0.3s ease-in-out; +} +.home__container .home__container__team .home__container__team__content .teams .user .imageBox img:hover { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +.home__container .home__container__team .home__container__team__content .teams .user .username { + font-size: 1.5rem; + font-weight: 600; + text-align: left; + width: 200px; + font-family: "Roboto", sans-serif; +} +.home__container .home__container__team .home__container__team__content .teams .user .post { + text-align: left; + color: #8a8a8a; + width: 200px; + font-size: 1rem; + font-weight: 500; + font-family: "Roboto", sans-serif; +} +.home__container .home__container__team .home__container__team__content .teams .user .social { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 4px; + margin: 2px; +} +.home__container .home__container__team .home__container__team__content .teams .user .social a { + text-decoration: none; + margin: 2px; + color: #fff; + font-size: 18px; +} +.home__container .home__container__team .home__container__team__content .teams .user .social a:hover { + -webkit-transform: scale(1.2); + transform: scale(1.2); + -webkit-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} +.home__container .home__container__team .home__container__team__content .teams .user .social a.darkMode { + color: #fff; + background: transparent; +} +.home__container .home__container__team .home__container__team__content .teams .user .social a.lightMode { + color: #000; + background: transparent; +} + +.button__container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + gap: 20px; +} + +.home__container__gallery { + display: block; + margin: 0 auto; + margin-top: 120px; + width: 100%; + padding: 0 5vw; +} +@media (max-width: 768px) { + .home__container__gallery { + margin-top: 50px; + } +} +.home__container__gallery .row { + display: -ms-flexbox; + /* IE10 */ + display: -webkit-box; + display: flex; + -ms-flex-wrap: wrap; + /* IE10 */ + flex-wrap: wrap; + padding: 0 5px; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + /* Responsive layout - makes a two column-layout instead of four columns */ + /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ +} +.home__container__gallery .row .column { + -ms-flex: 25%; + /* IE10 */ + -webkit-box-flex: 25%; + flex: 25%; + max-width: 25%; + padding: 0 5px; +} +.home__container__gallery .row .column .image-box { + width: 100%; + position: relative; + margin: auto; + overflow: hidden; + vertical-align: middle; + margin-top: 10px; +} +.home__container__gallery .row .column img { + width: 100%; + cursor: pointer; + -webkit-transition: all 0.3s ease; + transition: all 0.3s ease; + display: block; + -webkit-transform: scale(1); + transform: scale(1); +} +.home__container__gallery .row .column img:hover { + -webkit-transform: scale(1.1); + transform: scale(1.1); +} +@media screen and (max-width: 992px) { + .home__container__gallery .row .column { + -ms-flex: 50%; + -webkit-box-flex: 50%; + flex: 50%; + max-width: 50%; + } +} +@media screen and (max-width: 768px) { + .home__container__gallery .row .column { + -ms-flex: 100%; + -webkit-box-flex: 100%; + flex: 100%; + max-width: 100%; + } +} + +.home__container__documents { + color: #fff; + margin: 100px 5vw; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; + position: relative; + margin: 20px 0; + padding: 20px 100px; +} +.home__container__documents.lightMode { + background: #f1f1f1; +} +.home__container__documents h1.lightMode { + background: transparent; +} +@media (max-width: 992px) { + .home__container__documents { + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + } +} +@media (max-width: 768px) { + .home__container__documents { + margin: 50px 5vw; + } +} +.home__container__documents .faqs, +.home__container__documents .documents__links { + -webkit-box-flex: 1; + -ms-flex: 1 1 0px; + flex: 1 1 0; + font-family: "Roboto", sans-serif; +} +.home__container__documents .faqs button a.lightMode, +.home__container__documents .documents__links button a.lightMode { + border: 0.5px solid; +} +@media (max-width: 992px) { + .home__container__documents .faqs, +.home__container__documents .documents__links { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + } +} +.home__container__documents .absolute { + position: absolute; + font-size: 15em; + -webkit-text-fill-color: #000; + /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 2px; + z-index: -1; + top: 50%; + -webkit-text-stroke-color: #fff; + -webkit-transform: translateY(-50%); + transform: translateY(-50%); + opacity: 0.1; +} +.home__container__documents .overlay { + width: 0; + height: 0; +} +.home__container__documents .faqs h1 { + font-family: "Fira Code", monospace; + font-size: 4em; +} +@media (max-width: 768px) { + .home__container__documents .faqs h1 { + font-size: 2em; + } +} +.home__container__documents .faqs .faq__description { + color: rgb(153, 153, 153); + font-size: 18px; + margin-top: 20px; +} +.home__container__documents .faqs .faq__description.lightMode { + background: transparent; + color: #000; +} +.home__container__documents .faqs .faq__description.darkMode { + background: transparent; + color: rgb(153, 153, 153); +} +.home__container__documents .faqs .faqs__container { + margin-top: 40px; +} +.home__container__documents .faqs .faqs__container .MuiPaper-root { + background: transparent; + color: #fff; +} +.home__container__documents .faqs .faqs__container .MuiAccordionSummary-root { + border-top: 0.2px solid #dedede; +} +.home__container__documents .faqs .faqs__container .MuiTypography-root { + font-size: 18px; + font-weight: 600; +} +.home__container__documents .faqs .faqs__container .MuiTypography-root.lightMode { + background: transparent; +} +.home__container__documents .faqs .faqs__container .MuiAccordionDetails-root .MuiTypography-root { + font-size: 16px; + font-weight: 400; + color: #b9b9b9; +} +.home__container__documents .faqs .faqs__container .MuiAccordionDetails-root .MuiTypography-root.lightMode { + background: transparent; + color: #000; +} +.home__container__documents .faqs .faqs__container .MuiAccordionDetails-root .MuiTypography-root.darkMode { + background: transparent; + color: #b9b9b9; +} +.home__container__documents .faqs .faqs__container .MuiAccordionSummary-expandIconWrapper { + color: #fff; +} +.home__container__documents .faqs .faqs__container .MuiAccordionSummary-expandIconWrapper .MuiSvgIcon.lightMode { + background: transparent; + color: #000; +} +.home__container__documents .faqs .faqs__container .MuiAccordionSummary-expandIconWrapper .MuiSvgIcon.darkMode { + background: transparent; + color: #fff; +} +.home__container__documents .faqs .faqs__container #faq1-header div.MuiAccordionSummary-expandIconWrapper.css-yw020d-MuiAccordionSummary-expandIconWrapper svg.lightMode { + background: transparent; + color: #fff; +} +.home__container__documents .faqs .faqs__container #faq1-header div.MuiAccordionSummary-expandIconWrapper.css-yw020d-MuiAccordionSummary-expandIconWrapper svg.darkMode { + background: transparent; + color: #000; +} +.home__container__documents .documents__links { + margin-left: 80px; + font-size: 18px; + color: #a7a7a7; +} +@media (max-width: 992px) { + .home__container__documents .documents__links { + margin-left: 0; + margin-top: 50px; + } +} +.home__container__documents .documents__links h1 { + font-size: 4em; + -webkit-text-fill-color: #000; + /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #fff; + font-family: "Fira Code", monospace; +} +@media (max-width: 768px) { + .home__container__documents .documents__links h1 { + font-size: 2em; + } +} +.home__container__documents .documents__links p.lightMode { + background: transparent; + color: #000; +} +.home__container__documents .documents__links p.darkMode { + background: transparent; + color: #fff; + opacity: 1; +} +.home__container__documents .documents__links .MuiButton-root { + margin-bottom: 20px; + background: #000; + border: 0.5px solid #fff; + color: #fff; + padding: 0; +} +.home__container__documents .documents__links .MuiButton-root:hover { + background: #5308f7; +} +.home__container__documents .documents__links .MuiButton-root a { + padding: 0 40px; + text-decoration: none; +} +.home__container__documents .documents__links .MuiButton-root a.lightMode { + color: #000; +} +.home__container__documents .documents__links .MuiButton-root a.darkMode { + color: #fff; +} +.home__container__documents .documents__links img { + width: 100%; + border-radius: 15px; + margin-top: 25px; + margin-bottom: 20px; +} +@media (max-width: 768px) { + .home__container__documents .documents__links img { + width: 90vw; + } +} +.home__container__documents .documents__links b { + color: #9361ff; +} +.home__container__documents .documents__links b.content__highlight { + color: #fff; +} +.home__container__documents .documents__links .contractAddr a { + color: #fff; + text-decoration: none; +} +.home__container__documents .documents__links .contractAddr a.lightMode { + color: #000; +} +.home__container__documents .documents__links .contractAddr a.darkMode { + color: #fff; +} +@media (max-width: 768px) { + .home__container__documents .documents__links .contractAddr { + font-size: 14px; + } +} + +.footer__container { + color: #fff; + padding: 0 5vw; + padding-bottom: 50px; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} +.footer__container .update { + font-family: "Fira Code", monospace; + font-size: 18px; +} +.footer__container ul { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + list-style-type: none; +} +@media (max-width: 768px) { + .footer__container ul { + margin-top: 20px; + } +} +.footer__container ul a { + color: #fff; + margin-left: 30px; + font-size: 30px; + text-decoration: none; +} +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/src/Pages/Home/styles/style.css.map b/src/Pages/Home/styles/style.css.map new file mode 100644 index 0000000..c103e66 --- /dev/null +++ b/src/Pages/Home/styles/style.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"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","file":"style.css"} \ No newline at end of file diff --git a/src/Pages/Home/styles/style.scss b/src/Pages/Home/styles/style.scss index 2500f96..4a0e359 100644 --- a/src/Pages/Home/styles/style.scss +++ b/src/Pages/Home/styles/style.scss @@ -11,9 +11,39 @@ } } +$darkBackground: #262626; +$darkColor: #000; + +$lightBackground: #fff; +$lightColor: #fff; + +$darkMode: true; + +@mixin lightMode { + background: $lightBackground !important; + color: $darkColor !important; +} + +@mixin darkMode { + background: $darkBackground !important; + color: $lightColor !important; +} + +body { + &.lightMode { + @include lightMode(); + } + &.darkMode { + @include darkMode(); + } +} + .home__container { margin-top: 70px; position: relative; + // &.lightMode { + // background: #dfe4ea; + // } p { line-height: 1.5; @@ -34,7 +64,11 @@ .home__container__about { color: #fff; padding: 0 5vw; - // margin-top: -120px; + margin: 20px 0; + padding: 5px 100px; + &.lightMode { + background: #f1f1f1; + } @media (max-width: 768px) { margin-top: 105px; @@ -56,6 +90,12 @@ .title { font-family: "Fira Code", monospace; + h1 { + &.lightMode { + color: #000; + background: transparent; + } + } } .home__container__about__content { @@ -98,14 +138,38 @@ font-size: 18px; line-height: 1.6; color: #c3c3c3; + &.lightMode { + background: transparent; + color: #000; + } + &.darkMode { + background: transparent; + color: #c3c3c3; + } b { color: #fff; // animation: glow 2s ease-in-out infinite alternate; + &.lightMode { + background: transparent; + color: #000; + } + &.darkMode { + background: transparent; + color: #fff; + } } - ol{ + ol { margin: 20px; + &.lightMode { + background: transparent; + } + li { + &.lightMode { + background: transparent; + } + } } } } @@ -137,7 +201,14 @@ bottom: 0; right: 0; z-index: -1; - opacity: 0.5; + + &.lightMode { + opacity: 1 !important; + } + + &.darkMode { + opacity: 0.5; + } @media (max-width: 992px) { right: 50px; @@ -382,7 +453,7 @@ .absolute__title { position: absolute; - opacity: 0.1; + opacity: 0.07; top: 10vh; left: 50%; font-size: 5em; @@ -414,11 +485,27 @@ font-size: 35px; margin-bottom: 20px; } + &.lightMode { + color: #000; + background: transparent; + } + &.darkMode { + color: #fff; + background: transparent; + } } p { font-family: "Roboto", sans-serif; font-size: 17px; + // &.lightMode { + // color: #000; + // background: transparent; + // } + // &.darkMode { + // color: #fff; + // background: transparent; + // } } .top__description { @@ -427,6 +514,17 @@ text-align: center; opacity: 0.5; font-size: 19px; + color: #fff; + &.lightMode { + color: #000 !important; + background: transparent; + opacity: 1; + } + &.darkMode { + color: #fff !important; + background: transparent; + opacity: 0.5; + } @media (max-width: 768px) { max-width: 80vw; @@ -445,293 +543,529 @@ } } - .p { - color: #adadad; - - li { - margin-bottom: 20px; - list-style: none; + // .p { + // color: #adadad; + // &.lightMode { + // @include darkMode(); + // background: transparent; + // } + // &.darkMode { + // @include lightMode(); + // } + + li { + margin-bottom: 20px; + list-style: none; + &.lightMode { + // background: transparent !important; + color: #000; + background: transparent !important; + } + &.darkMode { + background: transparent !important; + // background: transparent !important; + color: #fff; + } + b { + color: #fff; + &.lightMode { + // background: transparent; + background: transparent !important; - b { - font-size: 19px; - line-height: 2; - color: #fff; + color: #000; } + &.darkMode { + // background: transparent; + background: transparent !important; - span { - color: #00d56a; - font-weight: bold; + color: #fff; } } } + } - .MuiTimelineItem-root::before { - @media (max-width: 991px) { - flex: 0; - } + .MuiTimelineItem-root::before { + @media (max-width: 991px) { + flex: 0; } } } - // @section => gallery - .home__container__gallery { - display: block; - margin: 0 auto; - margin-top: 120px; - width: 100%; - padding: 0 5vw; + .home__container__team { + margin: 100px 5vw; - @media (max-width: 768px) { - margin-top: 50px; + &.darkMode { + color: #fff; + background: #000; } + .home__container__team__content { + width: 100%; - .row { - display: -ms-flexbox; /* IE10 */ - display: flex; - -ms-flex-wrap: wrap; /* IE10 */ - flex-wrap: wrap; - padding: 0 5px; - justify-content: center; - - .column { - -ms-flex: 25%; /* IE10 */ - flex: 25%; - max-width: 25%; - padding: 0 5px; + h1 { + width: 100%; + // text-align: center; + -webkit-text-fill-color: #000; + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #fff; + font-size: 4em; + font-family: "Fira Code", monospace; + margin-bottom: 20px; - .image-box { - width: 100%; - position: relative; - margin: auto; - overflow: hidden; - vertical-align: middle; - margin-top: 10px; + @media (max-width: 768px) { + font-size: 2.5em; + text-align: center; + } + } + .teams { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; + @media (max-width: 768px) { + align-items: center; + justify-content: center; } - img { - width: 100%; - cursor: pointer; - transition: all 0.3s ease; - display: block; - transform: scale(1); + .user { + &.darkMode { + @include lightMode(); + } + &.lightMode { + color: #000; + background: transparent; + } + display: flex; + flex-direction: column; + // align-items: center; + + .imageBox { + border-radius: 16px; + height: 400px; + width: 200px; + overflow: hidden; + // vertical-align: middle; + margin: 20px 0; + + @media (max-width: 768px) { + width: 80vw; + } + + + img { + // height: 100%; + width: 100%; + height: 100%; + object-fit: cover; + cursor: pointer; + transform: scale(1); + transition: all 0.3s ease-in-out; + + &:hover { + transform: scale(1.1); + } + } + } + + .username { + font-size: 1.5rem; + font-weight: 600; + text-align: left; + width: 200px; + font-family: "Roboto", sans-serif; + } - &:hover { - transform: scale(1.1); + .post { + text-align: left; + // left: 10px; + color: #8a8a8a; + // margin: px; + width: 200px; + font-size: 1rem; + font-weight: 500; + font-family: "Roboto", sans-serif; + } + .social { + display: flex; + gap: 4px; + margin: 2px; + a { + text-decoration: none; + margin: 2px; + color: #fff; + font-size: 18px; + + &:hover { + transform: scale(1.2); + transition: all 0.2s ease-in-out; + } + &.darkMode { + color: #fff; + background: transparent; + } + &.lightMode { + color: #000; + background: transparent; + } + } } } } + } + } +} - /* Responsive layout - makes a two column-layout instead of four columns */ - @media screen and (max-width: 992px) { - .column { - -ms-flex: 50%; - flex: 50%; - max-width: 50%; - } +.button__container { + display: flex; + gap: 20px; +} + +// @section => gallery +.home__container__gallery { + display: block; + margin: 0 auto; + margin-top: 120px; + width: 100%; + padding: 0 5vw; + + @media (max-width: 768px) { + margin-top: 50px; + } + + .row { + display: -ms-flexbox; /* IE10 */ + display: flex; + -ms-flex-wrap: wrap; /* IE10 */ + flex-wrap: wrap; + padding: 0 5px; + justify-content: center; + + .column { + -ms-flex: 25%; /* IE10 */ + flex: 25%; + max-width: 25%; + padding: 0 5px; + + .image-box { + width: 100%; + position: relative; + margin: auto; + overflow: hidden; + vertical-align: middle; + margin-top: 10px; } - /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ - @media screen and (max-width: 768px) { - .column { - -ms-flex: 100%; - flex: 100%; - max-width: 100%; + img { + width: 100%; + cursor: pointer; + transition: all 0.3s ease; + display: block; + transform: scale(1); + + &:hover { + transform: scale(1.1); } } } - } - // @section => documents - .home__container__documents { - color: #fff; - margin: 100px 5vw; - display: flex; - align-items: flex-start; - position: relative; + /* Responsive layout - makes a two column-layout instead of four columns */ + @media screen and (max-width: 992px) { + .column { + -ms-flex: 50%; + flex: 50%; + max-width: 50%; + } + } - @media (max-width: 992px) { - flex-wrap: wrap; - flex-direction: column; + /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ + @media screen and (max-width: 768px) { + .column { + -ms-flex: 100%; + flex: 100%; + max-width: 100%; + } } + } +} - @media (max-width: 768px) { - margin: 50px 5vw; +// @section => documents +.home__container__documents { + color: #fff; + margin: 100px 5vw; + display: flex; + align-items: flex-start; + position: relative; + margin: 20px 0; + padding: 20px 100px; + &.lightMode { + background: #f1f1f1; + } + + h1 { + &.lightMode { + background: transparent; } + } - .faqs, - .documents__links { - flex: 1 1 0; - font-family: "Roboto", sans-serif; + @media (max-width: 992px) { + flex-wrap: wrap; + flex-direction: column; + } - @media (max-width: 992px) { - flex: 1; + @media (max-width: 768px) { + margin: 50px 5vw; + } + + .faqs, + .documents__links { + flex: 1 1 0; + font-family: "Roboto", sans-serif; + button { + a { + &.lightMode { + border: 0.5px solid; + } } } - .absolute { - position: absolute; - font-size: 15em; - -webkit-text-fill-color: #000; /* Will override color (regardless of order) */ - -webkit-text-stroke-width: 2px; - z-index: -1; - top: 50%; - -webkit-text-stroke-color: #fff; - transform: translateY(-50%); - opacity: 0.1; + @media (max-width: 992px) { + flex: 1; } + } - .overlay { - width: 0; - height: 0; - } + // .home__container__documents .documents__links .MuiButton-root a { + // &.lightMode{ + // border: .5px solid #000; + // } + // } + + .absolute { + position: absolute; + font-size: 15em; + -webkit-text-fill-color: #000; /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 2px; + z-index: -1; + top: 50%; + -webkit-text-stroke-color: #fff; + transform: translateY(-50%); + opacity: 0.1; + } - .faqs { - h1 { - font-family: "Fira Code", monospace; - font-size: 4em; + .overlay { + width: 0; + height: 0; + } - @media (max-width: 768px) { - font-size: 2em; - } + .faqs { + h1 { + font-family: "Fira Code", monospace; + font-size: 4em; + + @media (max-width: 768px) { + font-size: 2em; } + } - .faq__description { + .faq__description { + color: rgb(153, 153, 153); + font-size: 18px; + margin-top: 20px; + &.lightMode { + background: transparent; + color: #000; + } + &.darkMode { + background: transparent; color: rgb(153, 153, 153); - font-size: 18px; - margin-top: 20px; } + } - .faqs__container { - margin-top: 40px; + .faqs__container { + margin-top: 40px; - .MuiPaper-root { - background: transparent; - color: #fff; - } + .MuiPaper-root { + background: transparent; + color: #fff; + } + + .MuiAccordionSummary-root { + border-top: 0.2px solid #dedede; + // border-bottom: 0.2px solid #dedede; + } - .MuiAccordionSummary-root { - border-top: 0.2px solid #dedede; - // border-bottom: 0.2px solid #dedede; + .MuiTypography-root { + font-size: 18px; + font-weight: 600; + &.lightMode { + background: transparent; } + } + .MuiAccordionDetails-root { .MuiTypography-root { - font-size: 18px; - font-weight: 600; + font-size: 16px; + font-weight: 400; + color: #b9b9b9; + &.lightMode { + background: transparent; + color: #000; + } + &.darkMode { + background: transparent; + color: #b9b9b9; + } } + } - .MuiAccordionDetails-root { - .MuiTypography-root { - font-size: 16px; - font-weight: 400; - color: #b9b9b9; + .MuiAccordionSummary-expandIconWrapper { + color: #fff; + .MuiSvgIcon { + &.lightMode { + background: transparent; + color: #000; + } + &.darkMode { + background: transparent; + color: #fff; } } + } - .MuiAccordionSummary-expandIconWrapper { + #faq1-header + div.MuiAccordionSummary-expandIconWrapper.css-yw020d-MuiAccordionSummary-expandIconWrapper + svg { + &.lightMode { + background: transparent; color: #fff; } + &.darkMode { + background: transparent; + color: #000; + } } } + } - .documents__links { - margin-left: 80px; - font-size: 18px; - color: #a7a7a7; + .documents__links { + margin-left: 80px; + font-size: 18px; + color: #a7a7a7; - @media (max-width: 992px) { - margin-left: 0; - margin-top: 50px; + @media (max-width: 992px) { + margin-left: 0; + margin-top: 50px; + } + + h1 { + font-size: 4em; + -webkit-text-fill-color: #000; /* Will override color (regardless of order) */ + -webkit-text-stroke-width: 1px; + -webkit-text-stroke-color: #fff; + font-family: "Fira Code", monospace; + + @media (max-width: 768px) { + font-size: 2em; + } + } + p { + &.lightMode { + background: transparent; + color: #000; + // opacity: 0.8; + } + &.darkMode { + background: transparent; + color: #fff; + opacity: 1; } + } - h1 { - font-size: 4em; - -webkit-text-fill-color: #000; /* Will override color (regardless of order) */ - -webkit-text-stroke-width: 1px; - -webkit-text-stroke-color: #fff; - font-family: "Fira Code", monospace; + .MuiButton-root { + margin-bottom: 20px; + background: #000; + border: 0.5px solid #fff; + color: #fff; + padding: 0; - @media (max-width: 768px) { - font-size: 2em; - } + &:hover { + background: #5308f7; } - .MuiButton-root { - margin-bottom: 20px; - background: #000; - border: 0.5px solid #fff; - color: #fff; - padding: 0; - - &:hover { - background: #5308f7; + a { + padding: 0 40px; + text-decoration: none; + &.lightMode { + color: #000; } - - a{ - padding: 0 40px; - text-decoration: none; + &.darkMode { color: #fff; } } + } - img { - width: 100%; - border-radius: 15px; - margin-top: 25px; - margin-bottom: 20px; + img { + width: 100%; + border-radius: 15px; + margin-top: 25px; + margin-bottom: 20px; - @media (max-width: 768px) { - width: 90vw; - } + @media (max-width: 768px) { + width: 90vw; } + } - b { - color: #9361ff; + b { + color: #9361ff; - &.content__highlight { - color: #fff; - } + &.content__highlight { + color: #fff; } + } - .contractAddr { - a { - color: #fff; - text-decoration: none; + .contractAddr { + a { + color: #fff; + text-decoration: none; + &.lightMode { + color: #000; } - @media (max-width: 768px) { - font-size: 14px; + &.darkMode { + color: #fff; } } + @media (max-width: 768px) { + font-size: 14px; + } } } +} - .footer__container { - color: #fff; - padding: 0 5vw; - margin-bottom: 50px; +.footer__container { + color: #fff; + padding: 0 5vw; + padding-bottom: 50px; + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; + + .update { + font-family: "Fira Code", monospace; + font-size: 18px; + } + + ul { display: flex; - align-items: center; - justify-content: space-between; - flex-wrap: wrap; + list-style-type: none; - .update { - font-family: "Fira Code", monospace; - font-size: 18px; + @media (max-width: 768px) { + margin-top: 20px; } - ul { - display: flex; - list-style-type: none; - - @media (max-width: 768px) { - margin-top: 20px; - } - - a { - color: #fff; - margin-left: 30px; - font-size: 30px; - text-decoration: none; - } + a { + color: #fff; + margin-left: 30px; + font-size: 30px; + text-decoration: none; } } } diff --git a/src/index-dist.css b/src/index-dist.css new file mode 100644 index 0000000..988d702 --- /dev/null +++ b/src/index-dist.css @@ -0,0 +1 @@ +@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap");@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600&display=swap");*{margin:0;padding:0;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}body,html{overflow-x:hidden!important}body{z-index:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;position:relative;background:"#fff"}.popup-content{color:#fff;border:none!important;padding:10px;border-radius:16px;background:#000!important;text-align:center;font-family:"Fira Code",monospace}.popup-content h3{padding:15px 0}.popup-content p{padding:15px 0;line-height:1.5} \ No newline at end of file diff --git a/src/index.css b/src/index.css index 57cbaad..76ca3fc 100644 --- a/src/index.css +++ b/src/index.css @@ -20,7 +20,15 @@ body { -moz-osx-font-smoothing: grayscale; position: relative; background: #000; +} + +body.lightMode { + background: #fff !important; + +} +body.darkMode { + background: #000 !important; } .popup-content{ @@ -40,4 +48,9 @@ body { .popup-content p{ padding: 15px 0; line-height: 1.5; +} + +.lightMode { + background: #fff; + color: #000; } \ No newline at end of file diff --git a/src/index.js b/src/index.jsx similarity index 58% rename from src/index.js rename to src/index.jsx index 8d3b9ff..38aaf32 100644 --- a/src/index.js +++ b/src/index.jsx @@ -1,29 +1,27 @@ -import './index.css' +import "./index.css"; +import App from "./App"; +import ReactDOM from "react-dom"; +import React from "react"; +import AOS from "aos"; +import "aos/dist/aos.css"; +import reportWebVitals from "./reportWebVitals"; +import { register } from "./serviceWorkerRegistration"; -import App from './App' - -import ReactDOM from 'react-dom' -import React from 'react' -import AOS from 'aos' -import 'aos/dist/aos.css' -import reportWebVitals from './reportWebVitals' -import {register} from './serviceWorkerRegistration' - -AOS.init() +AOS.init(); ReactDOM.render(- + {/** + * @section => team members + */} +-Frequently Asked Questions_
-+
+ Frequently Asked Questions_ +
+The tech is new and ever-evolving – it helps to have a guide. Here's what we recommend you should know while you're diving in.
-+ -+ ++ ++++ Meet Our Team + + _ + +
++ + + + + + ++
+