Skip to content
This repository has been archived by the owner on Nov 24, 2023. It is now read-only.

Commit

Permalink
Merge pull request #98 from AllInOpenSource/coming-soon-page
Browse files Browse the repository at this point in the history
Coming soon page
  • Loading branch information
misspee007 authored Oct 30, 2023
2 parents c8e9c2d + b8ab155 commit 868b61a
Show file tree
Hide file tree
Showing 8 changed files with 314 additions and 66 deletions.
88 changes: 47 additions & 41 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -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;
16 changes: 10 additions & 6 deletions src/assets/images/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -87,9 +88,12 @@ export {
loginArrow,
getBadgedFullBG,
getBadgedMobile,
comingSoon,
Filter,
SearchIcon,
ScheduleIcon, DateIcon, AZicon,
ScheduleIcon,
DateIcon,
AZicon,
howItWorksBgWeb,
howItWorksBgMobile,
faqBgWeb,
Expand Down
45 changes: 45 additions & 0 deletions src/assets/images/others/coming-soon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
50 changes: 32 additions & 18 deletions src/components/Jumbotron/Jumbotron.js
Original file line number Diff line number Diff line change
@@ -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;
54 changes: 54 additions & 0 deletions src/components/Jumbotron/jumbotron.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
38 changes: 38 additions & 0 deletions src/pages/ComingSoon/ComingSoon.js
Original file line number Diff line number Diff line change
@@ -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;
Loading

0 comments on commit 868b61a

Please sign in to comment.