Merge pull request WeMakeDevs#149 from WeMakeDevs/coming-soon

[FEATURE]: Coming Soon page
Raghunandan16 · Nov 24, 2022 · a9de957 · a9de957
2 parents 06269b5 + e71e86e
commit a9de957
Show file tree

Hide file tree

Showing 18 changed files with 181 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
- "name": "commclassroom",
+ "name": "wemakedevs",
  "private": false,
- "homepage": "https://commclassroom.org",
+ "homepage": "https://wemakedevs.org",
  "dependencies": {
  "@testing-library/jest-dom": "^5.16.5",
  "@testing-library/react": "^13.4.0",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -39,7 +39,7 @@
  work correctly both with client-side routing and a non-root public URL.
  Learn how to configure a non-root public URL by running `npm run build`.
  -->
- <title>Community Classroom</title>
+ <title>WeMakeDevs</title>
  </head>
  <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -7,6 +7,7 @@ body{
  line-height: 1.5; 
  font-family: 'General Sans';
  overflow-x: hidden;
+ background: #141414;
  }
 
  li{

diff --git a/src/App.js b/src/App.js
@@ -6,16 +6,17 @@ import HomePage from './pages/HomePage.js'
 import Events from './pages/EventsPage.js'
 import Roadmaps from './pages/RoadmapsPage'
 import Hashnode from './pages/Hashnode.js'
+import ComingSoon from './pages/Comingsoon.js'
 
 const App = () => {
  return (
  <div className="main">
  <Routes>
- <Route exact path="/" element={<HomePage/>} />
- <Route path="/course" element={<Course />} />
+ <Route exact path="/" element={<ComingSoon/>} />
+ {/* <Route path="/course" element={<Course />} />
  <Route path="/event" element={<Events />} />
  <Route path="/roadmaps" element={<Roadmaps />} />
- <Route path="/hashnode" element={<Hashnode />} />
+ <Route path="/hashnode" element={<Hashnode />} /> */}
  </Routes>
  </div>
  )

diff --git a/src/assets/Discord.png b/src/assets/Discord.png
diff --git a/src/assets/Linkedin.png b/src/assets/Linkedin.png
diff --git a/src/assets/Twitter.png b/src/assets/Twitter.png
diff --git a/src/assets/coming_soon_bg.png b/src/assets/coming_soon_bg.png
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/youtube.png b/src/assets/youtube.png
diff --git a/src/components/Comingsoon/ComingSoonNavbar.js b/src/components/Comingsoon/ComingSoonNavbar.js
@@ -0,0 +1,41 @@
+import React, { useState } from 'react'
+import { FaBars, FaTimes } from 'react-icons/fa'
+import Logo from '../../assets/logo.png'
+import '../../styles/navbar.css';
+
+const ComingSoon = () => {
+ const [click, setClick] = useState(false);
+ const handleClick = () => setClick(!click);
+ return (
+ <div className='navbar_cont'>
+ <div className='navbar_logo'>
+ <img src={ Logo } alt="logo" />
+ </div>
+ <ul className={click ? 'navbar-menu active': 'navbar-menu'}>
+ <li className='navbar-item'>
+ <a href="https://twitter.com/commclassroom/" target="_blank">
+
+ </a>
+ </li>
+ <li className='navbar-item'>
+ <a href="https://www.linkedin.com/company/commclassroom/" target="_blank">
+
+ </a>
+ </li>
+ <li className='navbar-item'>
+ <a href="https://www.instagram.com/commclassroom/" target="_blank">
+
+ </a>
+ </li>
+ </ul>
+
+ <div className="navbar_hamburger" onClick={handleClick}>
+ {click ? (<FaTimes size={30} style={{color: "black"}} />) : (<FaBars size={30} style={{color: "black"}} />)
+ }
+ </div>
+ </div>
+ )
+}
+
+
+export default ComingSoon
diff --git a/src/components/Comingsoon/Comingsoon.css b/src/components/Comingsoon/Comingsoon.css
@@ -0,0 +1,84 @@
+.header_button{
+ background-color: #4094EC;
+ border-radius: 31px;
+ padding: 8px 16px 8px 16px;
+}
+.header_cont_1_a{
+ text-align: center;
+}
+.header_cont_1{
+ padding-top: 10rem;
+}
+.header_free_community{
+ font-family: 'General Sans', sans-serif;
+ width: 90%;
+ font-size: 76px;
+ font-weight: 800;
+ line-height: 96px;
+ letter-spacing: 0.01em;
+ text-align: center;
+ margin-left: 5%;
+ margin-top: 1rem;
+}
+.header_free{
+ height: 1.5em;
+ background: -webkit-linear-gradient(90deg, rgba(167,129,219,1) 0%, rgba(255,208,129,1) 50%, rgba(207,93,113,1) 100%), url("../../assets/coming_soon_bg.png");
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+}
+.header_para_about{
+ font-family: 'General Sans', sans-serif;
+ font-size: 20px;
+ font-weight: 450;
+ line-height: 29px;
+ letter-spacing: 0em;
+ text-align: center;
+ width: 57%;
+ margin-left: 20%;
+ margin-top: 1rem;
+}
+
+.header_cont_2_b_youtube{
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ background-color: white;
+ border: 1px solid #DEE4ED;
+ padding: 1em 2em;
+ font-family: 'General Sans', sans-serif;
+ font-size: 18px;
+ color: #181E25;
+ gap: 1em;
+}
+.header_cont_2_b_discord {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ background-color: white;
+ border: 1px solid #DEE4ED;
+ padding: 1em 2em;
+ font-family: 'General Sans', sans-serif;
+ font-size: 18px;
+ color: #181E25;
+ gap: 1em;
+}
+.header_cont_2_b{
+ margin-top: 2rem;
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: center;
+ gap: 2rem;
+}
+
+@media screen and (max-width: 500px){
+ .header_cont_1{
+ text-align: center;
+ }
+ .header_cont_2_b {
+ flex-direction: column;
+ }
+}
diff --git a/src/components/Comingsoon/Comingsoon.js b/src/components/Comingsoon/Comingsoon.js
@@ -0,0 +1,35 @@
+import React from 'react'
+import Discord from '../../assets/Discord.png'
+import Youtube from '../../assets/Youtube.png'
+import ComingSoonNavbar from './ComingSoonNavbar.js'
+import LinkedIn from '../../assets/Linkedin.png'
+import Twitter from '../../assets/Twitter.png'
+
+
+import "./Comingsoon.css"
+
+const Header = () => {
+ return (
+ <>
+ <ComingSoonNavbar />
+ <section className="header_cont_1">
+ <div className="header_cont_1_a">
+ <p className="header_free_community"> 
+ <span className="header_free">Coming Soon</span>
+ </p>
+ <p className="header_para_about">
+ Stay tuned as the team is working hard to bring some exciting stuff. Till then you can join our socials for updates.
+ </p>
+ </div>
+ <div className="header_cont_2_b">
+ <a href='https://www.youtube.com/c/KunalKushwaha/' target="_blank"> <img className="header_cont_2_b_img_youtube" src={Youtube} alt="youtube" /> </a>
+ <a href='https://discord.com/invite/wemakedevs' target="_blank"> <img className="header_cont_2_b_img_discord" src={Discord} alt="discord" /></a>
+ <a href='https://mobile.twitter.com/WeMakeDevs' target="_blank"> <img className="header_cont_2_b_img_discord" src={ Twitter} alt="discord" /></a>
+ <a href='https://www.linkedin.com/company/wemakedevs/' target="_blank"> <img className="header_cont_2_b_img_discord" src={ LinkedIn} alt="discord" /></a>
+ </div>
+ </section>
+ </>
+ )
+}
+
+export default Header
diff --git a/src/components/Comingsoon/coming_soon_bg.png b/src/components/Comingsoon/coming_soon_bg.png
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import {Link} from 'react-router-dom'
 import { FaBars, FaTimes } from 'react-icons/fa'
 import Logo from '../assets/logo.png'
-import Youtube from '../assets/youtube.png'
+import Youtube from '../assets/Youtube.png'
 import '../styles/navbar.css'
 
 const Navbar = () => {

diff --git a/src/pages/Comingsoon.js b/src/pages/Comingsoon.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import ComingSoon from '../components/Comingsoon/Comingsoon.js'
+
+const Comingsoon = () => {
+ return (
+ <div>
+ <ComingSoon />
+ </div>
+ )
+}
+
+export default Comingsoon
diff --git a/src/styles/Comingsoon.css b/src/styles/Comingsoon.css