diff --git a/src/App.js b/src/App.js index 8dd91a4..a5ee7e9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,48 +1,54 @@ -import { Route, Routes } from "react-router-dom"; +import { Route, Routes } from 'react-router-dom'; import { - Home, - About, - Projects, - GetStartedBadging, - SelectProjectRepo, - ErrorPage, - SuccessfullyBadged, -} from "./pages"; + Home, + About, + Projects, + GetStartedBadging, + SelectProjectRepo, + ErrorPage, + SuccessfullyBadged, + ComingSoon, +} from './pages'; import { - WhatIsDeiBadging, - ApplicationProcess, - DeiBadge, - DeiFile, -} from "./components"; -import { DataProvider } from "./contexts/DataContext"; -import { DesktopProvider } from "./contexts/DesktopContext"; + WhatIsDeiBadging, + ApplicationProcess, + DeiBadge, + DeiFile, +} from './components'; +import { DataProvider } from './contexts/DataContext'; +import { DesktopProvider } from './contexts/DesktopContext'; const App = () => { - return ( - <> - - - - } /> - }> - } /> - } - /> - } /> - } /> - - } /> - } /> - } /> - } /> - } /> - - - - - ); + return ( + <> + + + + } /> + }> + } /> + } + /> + } /> + } /> + + } /> + } /> + } /> + } /> + } + /> + } /> + + + + + ); }; export default App; diff --git a/src/assets/images/index.js b/src/assets/images/index.js index 46ed281..f202376 100644 --- a/src/assets/images/index.js +++ b/src/assets/images/index.js @@ -42,14 +42,15 @@ import faqBgWeb from './others/bg-faq-web.svg'; import heroSectionBgWeb from './others/bg-hero-section-web.svg'; import faqBgMobile from './others/bg-faq-mobile.svg'; import heroSectionBgMobile from './others/bg-hero-section-mobile.svg'; +import comingSoon from './others/coming-soon.svg'; import getBadgedMobile from './others/get-badged-mobile.svg'; -import Filter from './icons/Filter.svg' -import SearchIcon from './icons/SearchIcon.svg' -import ScheduleIcon from './icons/ScheduleIcon.svg' -import DateIcon from './icons/DateIcon.svg' -import AZicon from './icons/AZIcon.svg' +import Filter from './icons/Filter.svg'; +import SearchIcon from './icons/SearchIcon.svg'; +import ScheduleIcon from './icons/ScheduleIcon.svg'; +import DateIcon from './icons/DateIcon.svg'; +import AZicon from './icons/AZIcon.svg'; export { badgingLogo, @@ -87,9 +88,12 @@ export { loginArrow, getBadgedFullBG, getBadgedMobile, + comingSoon, Filter, SearchIcon, - ScheduleIcon, DateIcon, AZicon, + ScheduleIcon, + DateIcon, + AZicon, howItWorksBgWeb, howItWorksBgMobile, faqBgWeb, diff --git a/src/assets/images/others/coming-soon.svg b/src/assets/images/others/coming-soon.svg new file mode 100644 index 0000000..dccb9b1 --- /dev/null +++ b/src/assets/images/others/coming-soon.svg @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Jumbotron/Jumbotron.js b/src/components/Jumbotron/Jumbotron.js index 2841bb5..c9d8db3 100644 --- a/src/components/Jumbotron/Jumbotron.js +++ b/src/components/Jumbotron/Jumbotron.js @@ -1,25 +1,39 @@ -import React from "react"; -import PropTypes from "prop-types"; +import React from 'react'; +import PropTypes from 'prop-types'; +import '../../assets/styles/global.scss'; +import './jumbotron.scss'; +const Jumbotron = ({ + title, + description, + img, + subheading = null, + subtitle, + children, +}) => { + return ( +
+
+ {img}

{title}

+

{subtitle}

+
-const Jumbotron = ({ title, description, subheading = null, children }) => { - return ( -
-

{title}

-
- {subheading &&

{subheading}

} -

{description}

-
- {/* add any other children */} - {children} -
- ); +
+ {subheading &&

{subheading}

} +

{description}

+
+ {/* add any other children */} + {children} +
+ ); }; Jumbotron.propTypes = { - title: PropTypes.string.isRequired, - description: PropTypes.string.isRequired, - subheading: PropTypes.string, - children: PropTypes.node, + title: PropTypes.string.isRequired, + description: PropTypes.string.isRequired, + subheading: PropTypes.string, + children: PropTypes.node, + img: PropTypes.any, + subtitle: PropTypes.string, }; export default Jumbotron; diff --git a/src/components/Jumbotron/jumbotron.scss b/src/components/Jumbotron/jumbotron.scss new file mode 100644 index 0000000..ce9deb4 --- /dev/null +++ b/src/components/Jumbotron/jumbotron.scss @@ -0,0 +1,54 @@ +@import '../../assets/styles/variables'; + +.jumbo-main { + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + row-gap: 1.5rem; + padding-top: 3rem; + + h1 { + font-size: 3.2rem; + padding-left: 1.4rem; + font-family: $font-family_1; + background: $heroTitleBackground2; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; + -webkit-text-fill-color: transparent; + } + p { + text-align: center; + background: rgba(255, 255, 255, 1); + color: $chaossPink; + font-size: 16px; + line-height: 24px; + } +} +.jumbotron { + padding: 5.5rem 0 1.8rem 0; + margin: 0rem 0rem; + max-width: 70.875rem; + + h1 { + font-size: 3rem; + } +} + +@media screen and (min-width: 769px) { + .jumbo-main { + display: flex; + flex-direction: row; + padding-top: 6rem; + padding-bottom: 5rem; + p { + margin-left: 1rem; + margin-top: 0.5rem; + padding: 4px 8px; + } + } + .jumbotron { + margin: 0rem auto; + } +} diff --git a/src/pages/ComingSoon/ComingSoon.js b/src/pages/ComingSoon/ComingSoon.js new file mode 100644 index 0000000..dfddabf --- /dev/null +++ b/src/pages/ComingSoon/ComingSoon.js @@ -0,0 +1,38 @@ +import '../../assets/styles/global.scss'; +import './comingSoon.scss'; +import { Footer, Header, Jumbotron } from '../../components'; +import { comingSoon, curlyBraces } from '../../assets/images'; +import { Link } from 'react-router-dom'; + +const ComingSoon = () => { + return ( +
+
+ } + title="DEI Badged Projects" + subtitle="Coming soon!" + /> +
+
+ green and white cones +
+
+

Coming Soon

+

+ Lorem ipsum dolor sit amet consectetur. Porttitor rhoncus vel sed + interdum quis faucibus malesuada tellus. Cum nibh urna varius + sagittis faucibus feugiat accumsan ornare urna. +

+
+
+ Back to Homepage +
+
+ +
+ ); +}; + +export default ComingSoon; diff --git a/src/pages/ComingSoon/comingSoon.scss b/src/pages/ComingSoon/comingSoon.scss new file mode 100644 index 0000000..0c179e3 --- /dev/null +++ b/src/pages/ComingSoon/comingSoon.scss @@ -0,0 +1,77 @@ +@import '../../assets/styles/variables'; + +main { + background-color: #fff; + height: 632px; + + .soon-img { + width: 278px; + display: block; + margin: auto; + padding-top: 2rem; + } + img { + width: 290px; + } + + .soon-text { + width: 290px; + text-align: center; + margin: auto; + margin-top: 2rem; + color: green; + + h1 { + color: $headingColor; + font-family: $font-family_1; + font-size: 32px; + font-weight: bolder; + padding-bottom: 0.5rem; + } + p { + color: $textColor3; + font-family: $font-family_2; + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 2; + } + } + + .back-link { + display: flex; + justify-content: center; + margin-top: 6rem; + + a { + color: $textColor4; + background: $secondaryBtnColor2; + font-weight: 500; + font-size: 16px; + font-family: $font-family_2; + line-height: 24px; + padding: 26px 47px 26px 47px; + width: 263px; + text-align: center; + } + } +} + +@media screen and (min-width: 769px) { + main { + .soon-img { + width: 478px; + padding-top: 4rem; + } + img { + width: 478px; + } + .soon-text { + width: 492px; + + h1 { + font-size: 38px; + } + } + } +} diff --git a/src/pages/index.js b/src/pages/index.js index 0bd4a6b..27bb4be 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -12,5 +12,15 @@ import SelectProjectRepo from './SelectProjectRepo/SelectProjectRepo'; import ErrorPage from './Home/ErrorPage/ErrorPage'; import SuccessfullyBadged from './ProjectBadgingSuccess/ProjectBadgingSuccess'; +import ComingSoon from './ComingSoon/ComingSoon'; -export { Home, About, Projects, GetStartedBadging, SelectProjectRepo, ErrorPage, SuccessfullyBadged }; +export { + Home, + About, + Projects, + GetStartedBadging, + SelectProjectRepo, + ErrorPage, + SuccessfullyBadged, + ComingSoon, +};