From 5833efbf42d54564e47dc6c495cee9696d8c7882 Mon Sep 17 00:00:00 2001
From: Roshan Jossey <roshan.j@multunus.com>
Date: Sun, 2 Apr 2017 17:45:15 +0530
Subject: [PATCH] Create landing page with link to main readme
---
app/package.json | 2 +-
app/src/App.css | 22 ++++++++--------------
app/src/App.js | 9 +++------
app/src/components/LinkButton.css | 21 +++++++++++++++++++++
app/src/components/LinkButton.jsx | 14 ++++++++++++++
app/src/components/LinkButton.test.js | 0
6 files changed, 47 insertions(+), 21 deletions(-)
create mode 100644 app/src/components/LinkButton.css
create mode 100644 app/src/components/LinkButton.jsx
create mode 100644 app/src/components/LinkButton.test.js
diff --git a/app/package.json b/app/package.json
index dca4673226..fe9cc6a28f 100644
--- a/app/package.json
+++ b/app/package.json
@@ -2,7 +2,7 @@
"name": "first-contributions",
"version": "0.1.0",
"private": true,
- "homepage": "https://multunus.github.io/first-contributions",
+ "homepage": "https://roshanjossey.github.io/first-contributions",
"devDependencies": {
"gh-pages": "^0.12.0",
"react-scripts": "0.7.0"
diff --git a/app/src/App.css b/app/src/App.css
index 15adfdc710..e6b6364bb0 100644
--- a/app/src/App.css
+++ b/app/src/App.css
@@ -1,24 +1,18 @@
.App {
+ height: 500px;
+ background-color: #007EE5;
text-align: center;
-}
-
-.App-logo {
- animation: App-logo-spin infinite 20s linear;
- height: 80px;
+ display: flex;
+ justify-content: center;
+ align-items: middle;
+ flex-direction: column;
}
.App-header {
- background-color: #222;
- height: 150px;
padding: 20px;
color: white;
}
-.App-intro {
- font-size: large;
-}
-
-@keyframes App-logo-spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
+.App-header > h1 {
+ font-size: 2.5em;
}
diff --git a/app/src/App.js b/app/src/App.js
index 0397d01b0a..8420e03006 100644
--- a/app/src/App.js
+++ b/app/src/App.js
@@ -1,18 +1,15 @@
import React, { Component } from 'react';
-import logo from './logo.svg';
import './App.css';
+import LinkButton from './components/LinkButton';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <h2>Welcome to first-contributions</h2>
+ <h1>Make your first open source contribution in 5 minutes</h1>
</div>
- <p className="App-intro">
- To get started, edit <code>src/App.js</code> and save to reload.
- </p>
+ <LinkButton />
</div>
);
}
diff --git a/app/src/components/LinkButton.css b/app/src/components/LinkButton.css
new file mode 100644
index 0000000000..9341e87451
--- /dev/null
+++ b/app/src/components/LinkButton.css
@@ -0,0 +1,21 @@
+.LinkButton {
+ padding: 10px 15px;
+ text-decoration: none;
+ margin: 20px auto;
+
+ overflow: hidden;
+
+ border-width: 0;
+ border-radius: 2px;
+ box-shadow: 0 1px 4px rgba(0, 0, 0, .2);
+
+ background-color: #2ecc71;
+ color: #fff;
+
+ transition: background-color .3s;
+}
+
+.LinkButton > span {
+ font-size: 1.1em;
+ letter-spacing: .05em;
+}
diff --git a/app/src/components/LinkButton.jsx b/app/src/components/LinkButton.jsx
new file mode 100644
index 0000000000..1416ee371d
--- /dev/null
+++ b/app/src/components/LinkButton.jsx
@@ -0,0 +1,14 @@
+import React, { Component } from 'react';
+import './LinkButton.css';
+
+class LinkButton extends Component {
+ render() {
+ return (
+ <a className="LinkButton" href="https://github.com/Roshanjossey/first-contributions/blob/master/README.md">
+ <span> Get started </span>
+ </a>
+ );
+ }
+}
+
+export default LinkButton;
diff --git a/app/src/components/LinkButton.test.js b/app/src/components/LinkButton.test.js
new file mode 100644
index 0000000000..e69de29bb2
--
GitLab