Coming soon page

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 (
-		<>
-			<DesktopProvider>
-				<DataProvider>
-					<Routes>
-						<Route exact path="/" element={<Home />} />
-						<Route path="/about" element={<About />}>
-							<Route path="/about" element={<WhatIsDeiBadging />} />
-							<Route
-								path="/about/application-process"
-								element={<ApplicationProcess />}
-							/>
-							<Route path="/about/dei-file" element={<DeiFile />} />
-							<Route path="/about/dei-badge" element={<DeiBadge />} />
-						</Route>
-						<Route path="/badge" element={<GetStartedBadging />} />
-						<Route path="/select-project" element={<SelectProjectRepo />} />
-						<Route exact path="/projects" element={<Projects />} />
-						<Route exact path="/project-badging-successful" element={<SuccessfullyBadged />} />
-						<Route path="*" element={<ErrorPage />} />
-					</Routes>
-				</DataProvider>
-			</DesktopProvider>
-		</>
-	);
+  return (
+    <>
+      <DesktopProvider>
+        <DataProvider>
+          <Routes>
+            <Route exact path="/" element={<Home />} />
+            <Route path="/about" element={<About />}>
+              <Route path="/about" element={<WhatIsDeiBadging />} />
+              <Route
+                path="/about/application-process"
+                element={<ApplicationProcess />}
+              />
+              <Route path="/about/dei-file" element={<DeiFile />} />
+              <Route path="/about/dei-badge" element={<DeiBadge />} />
+            </Route>
+            <Route path="/badge" element={<GetStartedBadging />} />
+            <Route path="/select-project" element={<SelectProjectRepo />} />
+            <Route exact path="/projects" element={<Projects />} />
+            <Route exact path="/comingsoon" element={<ComingSoon />} />
+            <Route
+              exact
+              path="/project-badging-successful"
+              element={<SuccessfullyBadged />}
+            />
+            <Route path="*" element={<ErrorPage />} />
+          </Routes>
+        </DataProvider>
+      </DesktopProvider>
+    </>
+  );
 };
 
 export default App;

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,

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 (
+    <div className="jumbotron">
+      <div className="jumbo-main">
+        {img} <h1>{title}</h1>
+        <p className="sub">{subtitle}</p>
+      </div>
 
-const Jumbotron = ({ title, description, subheading = null, children }) => {
-	return (
-		<div className="jumbotron">
-			<h2>{title}</h2>
-			<div>
-				{subheading && <h3>{subheading}</h3>}
-				<p>{description}</p>
-			</div>
-			{/* add any other children */}
-			{children}
-		</div>
-	);
+      <div>
+        {subheading && <h3>{subheading}</h3>}
+        <p>{description}</p>
+      </div>
+      {/* add any other children */}
+      {children}
+    </div>
+  );
 };
 
 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;

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;
+  }
+}

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 (
+    <div>
+      <Header />
+      <Jumbotron
+        img={<img src={curlyBraces} alt="curly braces" />}
+        title="DEI Badged Projects"
+        subtitle="Coming soon!"
+      />
+      <main>
+        <div className="soon-img">
+          <img src={comingSoon} alt="green and white cones" />
+        </div>
+        <div className="soon-text">
+          <h1>Coming Soon</h1>
+          <p>
+            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.
+          </p>
+        </div>
+        <div className="back-link">
+          <Link to="/">Back to Homepage</Link>
+        </div>
+      </main>
+
+      <Footer />
+    </div>
+  );
+};
+
+export default ComingSoon;