From d9451849a401aafed463367689ac375949bad2b3 Mon Sep 17 00:00:00 2001
From: alok <alok.takshak@gmail.com>
Date: Fri, 4 Oct 2019 12:19:41 +0530
Subject: [PATCH] updated the home page

---
 package.json                    |  2 +-
 scripts/dependencies.js         |  1 +
 template/logo/border.svg        |  8 ++++
 template/logo/logo.svg          |  6 +++
 template/src/App.css            | 72 ++++++++++++++++++++++++++-------
 template/src/App.js             | 43 +++++++++++---------
 template/webpack.config.base.js |  4 ++
 7 files changed, 102 insertions(+), 34 deletions(-)
 create mode 100644 template/logo/border.svg
 create mode 100644 template/logo/logo.svg

diff --git a/package.json b/package.json
index 6605028..243ae9a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-react-webpack",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "create-react-webpack ",
   "main": "scripts/create.js",
   "bin": {
diff --git a/scripts/dependencies.js b/scripts/dependencies.js
index e6e7c0b..e49ee5e 100644
--- a/scripts/dependencies.js
+++ b/scripts/dependencies.js
@@ -13,6 +13,7 @@ const DEV_DEPENDENCIES = [
   "css-loader",
   "eslint",
   "eslint-plugin-react",
+  "file-loader",
   "html-webpack-plugin",
   "husky",
   "jest",
diff --git a/template/logo/border.svg b/template/logo/border.svg
new file mode 100644
index 0000000..f968e62
--- /dev/null
+++ b/template/logo/border.svg
@@ -0,0 +1,8 @@
+<svg width="772" height="859" viewBox="0 0 772 859" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M751.631 656.505L399.436 855.005L399.436 708.505L624.631 585.505L751.631 656.505Z" fill="#FDF8D4"/>
+<path d="M370.099 856.635L22.0957 650.875L148.968 577.625L368.087 711.149L370.099 856.635Z" fill="#FDF8D4"/>
+<path d="M404.532 0L752.535 205.76L625.663 279.01L406.544 145.485L404.532 0Z" fill="#FDF8D4"/>
+<path d="M18 205.13L370.195 6.62988L370.195 153.13L145 276.13L18 205.13Z" fill="#FDF8D4"/>
+<path d="M0 639.26L0 234L131.064 308.25L131.064 563L0 639.26Z" fill="#FDF8D4"/>
+<path d="M771.064 229V634.5L640 560.01V302L771.064 229Z" fill="#FDF8D4"/>
+</svg>
diff --git a/template/logo/logo.svg b/template/logo/logo.svg
new file mode 100644
index 0000000..c4ed392
--- /dev/null
+++ b/template/logo/logo.svg
@@ -0,0 +1,6 @@
+<svg width="435" height="467" viewBox="0 0 435 467" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M425 233.5C425 242.328 420.694 251.675 410.935 261.17C401.143 270.696 386.455 279.735 367.49 287.538C329.609 303.127 276.584 313 217.5 313C158.416 313 105.391 303.127 67.5096 287.538C48.5451 279.735 33.8566 270.696 24.0654 261.17C14.3057 251.675 10 242.328 10 233.5C10 224.672 14.3057 215.325 24.0654 205.83C33.8566 196.304 48.5451 187.265 67.5096 179.462C105.391 163.873 158.416 154 217.5 154C276.584 154 329.609 163.873 367.49 179.462C386.455 187.265 401.143 196.304 410.935 205.83C420.694 215.325 425 224.672 425 233.5Z" stroke="#86C1BD" stroke-width="20"/>
+<path d="M321.25 413.2C313.605 417.614 303.357 418.559 290.254 414.854C277.109 411.138 261.937 402.936 245.697 390.415C213.256 365.402 178.193 324.418 148.651 273.25C119.109 222.081 101.147 171.224 95.7062 130.624C92.9822 110.298 93.4661 93.0578 96.8199 79.8156C100.163 66.6158 106.105 58.2136 113.75 53.7997C121.395 49.3857 131.643 48.4411 144.746 52.1458C157.891 55.8623 173.063 64.0634 189.303 76.5853C221.744 101.598 256.807 142.581 286.349 193.75C315.891 244.918 333.853 295.776 339.294 336.376C342.018 356.702 341.534 373.942 338.18 387.184C334.837 400.384 328.895 408.786 321.25 413.2Z" stroke="#86C1BD" stroke-width="20"/>
+<path d="M321.25 53.7997C328.895 58.2136 334.837 66.6159 338.18 79.8156C341.534 93.0579 342.018 110.298 339.294 130.624C333.853 171.224 315.891 222.081 286.349 273.25C256.807 324.418 221.744 365.402 189.303 390.415C173.063 402.936 157.891 411.138 144.746 414.854C131.643 418.559 121.395 417.614 113.75 413.2C106.105 408.786 100.163 400.384 96.8199 387.184C93.466 373.942 92.9822 356.702 95.7062 336.376C101.147 295.776 119.109 244.918 148.651 193.75C178.193 142.581 213.256 101.598 245.697 76.5853C261.937 64.0634 277.109 55.8624 290.254 52.1458C303.357 48.4411 313.605 49.3858 321.25 53.7997Z" stroke="#86C1BD" stroke-width="20"/>
+<circle cx="217" cy="233" r="40" fill="#86C1BD"/>
+</svg>
diff --git a/template/src/App.css b/template/src/App.css
index 4a7393f..b274d11 100644
--- a/template/src/App.css
+++ b/template/src/App.css
@@ -10,24 +10,68 @@ html {
   box-sizing: inherit;
 }
 
-.app {
-  background-color: antiquewhite;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 98vh;
+.App {
+  font-family: sans-serif;
+  text-align: center;
+  width: 100%;
+  height: 100vh;
+}
+
+.black {
+  background-color: rgb(46, 43, 43);
   width: 100%;
+  height: 30%;
 }
 
 .button {
-  background-color: red;
-  border-radius: 20px;
-  color: white;
-  font-size: 20px;
-  font-weight: bold;
+  border-radius: 50%;
+  font-size: 30px;
   margin: 10px;
+  width: 40px;
+  height: 40px;
   outline: none;
-  padding-left: 20px;
-  padding-right: 20px;
+}
+.loaderContainer {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-position: center;
+  background-size: 160px;
+  background-repeat: no-repeat;
+  height: 180px;
+  top: -90px;
+  animation: counterClock 3s linear infinite;
+  filter: brightness(0.93);
+}
+
+.loader {
+  width: 100px;
+  height: 100px;
+  animation: clock 2s linear infinite;
+  background-size: 150%;
+  background-position: center;
+}
+
+.text {
+  font-size: 24px;
+  padding: 10px;
+}
+
+@keyframes clock {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes counterClock {
+  0% {
+    transform: rotate(360deg);
+  }
+  100% {
+    transform: rotate(0deg);
+  }
 }
diff --git a/template/src/App.js b/template/src/App.js
index a390b49..c34d1ff 100644
--- a/template/src/App.js
+++ b/template/src/App.js
@@ -1,6 +1,8 @@
 import React, { Component } from "react";
 import { hot } from "react-hot-loader";
 import "./App.css";
+import logo from "../logo/logo.svg";
+import border from "../logo/border.svg";
 
 class App extends Component {
   constructor(props) {
@@ -10,28 +12,31 @@ class App extends Component {
     };
   }
 
+  handleCount(input) {
+    this.setState(prevState => ({ count: prevState.count + input }));
+  }
+
   render() {
     return (
-      <div className="app">
-        <h1>Hello World!</h1>
-        <h2>{`Count : ${this.state.count}`}</h2>
-        <div>
-          <button
-            className="button"
-            onClick={() => {
-              this.setState(state => ({ count: state.count + 1 }));
-            }}
-          >
-            +
-          </button>
-          <button
-            className="button"
-            onClick={() => {
-              this.setState(state => ({ count: state.count - 1 }));
-            }}
+      <div>
+        <div className="App">
+          <div className="black" />
+          <div
+            className="loaderContainer"
+            style={{ backgroundImage: `url(${border})` }}
           >
-            -
-          </button>
+            <img className="loader" src={logo} width={100} height={100} />
+          </div>
+          <div className="text">Hello World!</div>
+          <div className="text">{this.state.count}</div>
+          <div className="buttons">
+            <button className="button" onClick={() => this.handleCount(1)}>
+              +
+            </button>
+            <button className="button" onClick={() => this.handleCount(-1)}>
+              -
+            </button>
+          </div>
         </div>
       </div>
     );
diff --git a/template/webpack.config.base.js b/template/webpack.config.base.js
index 8f1062f..9eaa9df 100644
--- a/template/webpack.config.base.js
+++ b/template/webpack.config.base.js
@@ -20,6 +20,10 @@ module.exports = {
         test: /\.css$/,
         use: ["style-loader", "css-loader"],
         exclude: /node_modules/
+      },
+      {
+        test: /\.svg$/,
+        use: "file-loader"
       }
     ]
   },