Load background image async

package.json

@@ -4,18 +4,20 @@
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.1.1",
+    "classnames": "^2.2.6",
     "gh-pages": "^2.0.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-scripts": "3.0.1"
+    "react-scripts": "3.0.1",
+    "styled-components": "^4.3.2"
   },
   "homepage": "http://ddosdevs.co.il",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "predeploy": "yarn run build",
+    "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
   },
   "eslintConfig": {

src/App.css

@@ -1,62 +1,70 @@
 body {
-  padding: 50px;
-  background-color: #f9f9f9;
-  font-size: 1.2em;
-  margin: 0 auto;
-  max-width: 1000px;
+    font-size: 1.2em;
+    margin: 0 auto;
+    width: 100%;
 }
 
 .App {
-  text-align: justify;
+    text-align: justify;
 }
 
 .App-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  color: black;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: white;
+}
+
+.app-header-background {
+    background-size: cover;
+    background-image: url("./images/background.png");
 }
 
 .App-logo {
-  height: 33vmin;
+    height: 33vmin;
+}
+
+.description-container{
+    display: flex;
+    flex-direction: row;
 }
 
 h1 {
-  font-size: 3rem;
-  margin: 10px 0;
+    font-size: 3rem;
+    margin: 10px 0;
 }
 
 h2, h3, h4, .list {
-  font-size: 1.5rem;
-  font-weight: 400;
+    font-size: 1.5rem;
+    font-weight: 400;
 }
 
 .list {
     list-style-type: none;
+    padding: 10px;
 }
 
 .list-item > * {
     display: inline;
 }
 
-.list-item img{
-  width: 4rem;
-  margin-left: 1rem;
+.list-item img {
+    width: 4rem;
+    margin-left: 1rem;
 }
 
 p {
-  text-align: center;
+    text-align: center;
 }
 
-.network-icon img{
-  width: 5rem;
-  padding: 0 15px 10px;
-  border-bottom: 10px solid transparent;
+.network-icon img {
+    width: 5rem;
+    padding: 0 15px 10px;
 }
 
 .network-icon img:hover {
-  border-color: orange;
+    border-color: orange;
 }
 
 .list-item > * {
@@ -67,11 +75,17 @@ p {
     list-style-type: none;
 }
 
-@media(max-width: 500px) {
+.bottom-line{
+    padding: 5px;
+}
+
+@media (max-width: 500px) {
     body {
-        padding: 20px;
+        width: 100%;
+    }
+    .description-container{
+        flex-direction: column;
     }
-
     h2, h3, h4 {
         font-size: 1.4rem;
     }

src/App.js

@@ -1,45 +1,91 @@
-import React from 'react';
+import React, { Component } from 'react';
 import logo from './logo.png';
-import ListItem from "./listItem.png";
-import config from './config'
+import ListItem from "./images/listItemWhite.png";
+import config from './config';
+import { Link } from "@material-ui/core"
 import './App.css';
-import SvgIcon from "@material-ui/core/SvgIcon";
-
-function App() {
-    return (
-        <div className="App">
-            <header className="App-header">
-                <img src={logo} className="App-logo" alt="logo"/>
-                <h1>
-                    קהילת המפתחים החרדים ושומרי התורה
+import styled from "styled-components";
+import classnames from "classnames";
+
+const LinksContainer = styled.div`
+    display: flex;
+    flex-direction: row;
+    flex-basis: fit-content;
+    flex-wrap: wrap;
+    margin-right: 17%;
+`;
+
+const StyledLink = styled(Link) `
+  display: flex;
+  flex-direction: column;
+`;
+
+const Description = styled.h2`
+  padding: 5%;
+`;
+
+const RightSide = styled.div`
+  border-left: 2px gray solid;
+  flex: 50;
+`;
+
+class App extends Component {
+    constructor(props){
+        super(props)
+        this.state = {
+            loaded: false
+        }
+    }
+
+    componentDidMount(){
+
+        // TODO: you can add settimeout before change the state
+        this.setState({ loadded: true })
+    }
+
+    render() {
+        return (
+            <div className="App">
+                <header className={classnames( "App-header", (this.state.loadded && 'app-header-background' ))}>
+                    <img src={logo} className="App-logo" alt="logo" />
+                    <h1>
+                        קהילת המפתחים החרדים ושומרי התורה
                 </h1>
-                <h2>
-                    {config.description}
-                </h2>
-                <ul className="list">
-                    {config.targets.map(target =>
-                        <li className="list-item">
-                            <img src={ListItem}/>
-                            <h3>{target}</h3>
-                        </li>
-                    )}
-                </ul>
-
-                <h4>יחד מצמצמים את הפערים בחברה ומקדמים את הציבור שלנו לקדמת התעשייה!</h4>
-            </header>
-
-            <p>
-                <h2>הצטרפו אלינו!</h2>
-                {config.networks.map(network => {
-                    return (
-                        <a className="network-icon" href={network.url}>
-                            <img src={network.icon}/>
-                        </a>
-                    )
-                })}
-            </p>
-        </div>
-    );
+                    <div className='description-container'>
+                        <RightSide>
+                            <Description>
+                                {config.description}
+                            </Description>
+                        </RightSide>
+                        <ul className="list">
+                            {config.targets.map(target =>
+                                <li key={target} className="list-item">
+                                    <img src={ListItem} />
+                                    <h3>{target}</h3>
+                                </li>
+                            )}
+                        </ul>
+                    </div>
+
+                    <h4 className='bottom-line'>יחד מצמצמים את הפערים בחברה ומקדמים את הציבור שלנו לקדמת התעשייה!</h4>
+                </header>
+
+                <p>
+                    <h2>הצטרפו אלינו!</h2>
+                    <LinksContainer>
+                        {config.networks.map(network => {
+                            return (
+                                <StyledLink key={network.displayName} className="network-icon" href={network.url}>
+                                    <img src={network.icon} />
+                                    <span>{network.displayName}</span>
+                                </StyledLink>
+                            )
+                        })}
+                    </LinksContainer>
+                </p>
+            </div>
+        );
+    }
 }
 
 export default App;

src/config.js

@@ -4,18 +4,25 @@ import Whatsapp from "./images/whatsapp.png";
 import Telegram from "./images/telegram.png";
 import Meetup from "./images/meetup.png";
 import LinkedIn from "./images/linkedIn.png";
+import Youtube from "./images/youtube.png";
 
 const config = {
     description: "קהילת המפתחים החרדים ושומרי התורה מאגדת ומחברת את כלל האנשים בתעשייה ומספקת להם את הצרכים שהמפתח צריך בסביבה הנוחה לאורח חיים שומר תורה",
     targets: ["היכרות עם כל מה שקורה בתעשייה בארץ ובעולם.", "טרנדים טכנולוגים חדשים.", "כנסים טכנולוגים והאקטונים.", "קורסים טכנולוגים."],
     networks: [
         {
-            url: "https://www.facebook.com/groups/265568917670650/",
-            icon: Facebook
+            url: "https://chat.whatsapp.com/LkhoVLUg8gAGw9vTdHtHJc",
+            icon: Whatsapp,
+            displayName: 'גברים'
         },
         {
-            url: "https://chat.whatsapp.com/LkhoVLUg8gAGw9vTdHtHJc",
-            icon: Whatsapp
+            url: "https://chat.whatsapp.com/LHD5e3egpIRC9subf5HYUK",
+            icon: Whatsapp,
+            displayName: 'נשים'
+        },
+        {
+            url: "https://www.facebook.com/groups/265568917670650/",
+            icon: Facebook
         },
         {
             url: "https://twitter.com/DDoSDevelopers",
@@ -33,6 +40,10 @@ const config = {
             url: "https://www.linkedin.com/groups/8772672",
             icon: LinkedIn
         },
+        {
+            url: "https://www.youtube.com/channel/UCgVv3AFwYIBYxX_Dm_hAvtA",
+            icon: Youtube
+        },
     ]
 };