Adds new homepage

package.json

@@ -7,7 +7,8 @@
   "author": "Mofid Ansari",
   "dependencies": {
     "react": "^16.8.6",
-    "react-dom": "^16.8.6"
+    "react-dom": "^16.8.6",
+    "react-router-dom": "^5.1.0"
   },
   "devDependencies": {
     "autoprefixer": "^9.6.0",

src/App.js

@@ -1,11 +1,23 @@
 import React from 'react';
+import {BrowserRouter, Switch, Route} from 'react-router-dom';
 import './App.css';
-import Home from './components/Home'
+import Asteria from './components/Asteria';
+import Home from './components/Home';
+import Header from './components/Layout/Header';
+import Footer from './components/Layout/Footer';
 
 function App() {
   return (
     <div className="font-body antialiased">
-      <Home />
+      <BrowserRouter >
+        <Header />
+        <Switch>
+          <Route exact path="/" component={Home}/>
+          <Route path="/asteria" component={Asteria}/>
+        </Switch>
+        <Footer />
+      </BrowserRouter>
+
     </div>
   );
 }

src/components/Home/Mentors.js → src/components/About/Mentors.js

@@ -15,7 +15,8 @@ const mentors = [
 
 const Mentors = () => {
   return (
-    <section className="mentors text-center sm:text-left mt-20 px-4 sm:px-8 md:px-10">
+    <section
+      className="mentors text-center sm:text-left mt-20 px-4 sm:px-8 md:px-10">
       <div className="max-w-5xl mx-auto">
         <h2 className="font-display text-4xl text-primary font-bold">Mentor</h2>
         <div className="flex flex-wrap justify-center sm:justify-start -ml-16 mt-20">

src/components/Home/Team.js → src/components/About/Team.js

@@ -12,7 +12,7 @@ const Team = () => {
           {MemberData.map(member => {
             return (<Member key={member.link} member={member}/>)
           })
-          }
+}
         </div>
       </div>
     </section>

src/components/About/index.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Team from '../Team'
+import Mentors from '../Mentors'
+import Associations from '../Associations'
+
+const index = () => {
+  return (
+    <div>
+      <Team />
+      <Mentors />
+      <Associations />
+    </div>
+  );
+};
+
+export default index;

src/components/Asteria/Hero.js

@@ -0,0 +1,46 @@
+import React, {useState} from 'react';
+
+const Hero = () => {
+
+  const [submitted,
+    setSubmitted] = useState('')
+
+  return (
+    <section className="hero mt-32 sm:mt-48 mb-24 px-6 sm:px-8 md:px-10">
+      <div className="max-w-5xl mx-auto">
+        <div className="hero-container max-w-2xl text-center sm:text-left">
+          <h1
+            className="hero-title font-display text-5xl sm:text-6xl font-bold text-primary">Meet Asteria Protocol</h1>
+          <div className="hero-subtitle text-xl text-grey70 mt-4">
+            New standard to treat and store user data that makes privacy and security
+            accessible to all.
+          </div>
+          <form
+            action="https://docs.google.com/forms/d/e/1FAIpQLSfzv2VtO6S7hE4KKXCAszJspfcBp3C4ZlPdEMAa6T3J69ZNkg/formResponse"
+            className={`${submitted} hero-cta mt-16`}
+            target="hidden_iframe"
+           >
+            <input
+              name="entry.1532827602"
+              className="bg-grey250 px-6 py-4 min-w-full sm:min-w-auto sm:w-84 outline-none rounded sm:rounded-r-none text-center sm:text-left"
+              type="email"
+              placeholder="Your Email"
+              required/>
+            <input
+              className='mt-2 sm:mt-0 min-w-full sm:min-w-auto sm:w-auto bg-primary text-white px-6 py-4 rounded sm:rounded-l-none cursor-pointer'
+              value="Get Monthly Updates"
+              onClick={()=>{setSubmitted('submitted')}}
+              type="submit"/>
+          </form>
+
+          <iframe title="hidden_iframe" name="hidden_iframe" id="hidden_iframe" className="hidden"></iframe>
+
+          <div className={`${submitted} form-feedback mt-6 text-variant2 font-bold`}>Thank you for signing up for updates on Asteria Protocol.</div>
+
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Hero;

src/components/Home/Quote.js → src/components/Asteria/Quote.js

@@ -2,7 +2,7 @@ import React from 'react';
 
 const Quote = () => {
   return (
-    <section className="quote mt-40 px-6 sm:px-8 md:px-10">
+    <section className="quote mt-40 mb-40 px-6 sm:px-8 md:px-10">
       <div className="max-w-4xl mx-auto font-light text-4xl">
         <span className="">
           <svg width="117" height="107" xmlns="http://www.w3.org/2000/svg">

src/components/Asteria/index.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import './Hero';
+import Hero from './Hero';
+import Feature from './Feature'
+import Quote from './Quote'
+
+const index = () => {
+  return (
+   <main>
+     <Hero />
+     <Feature />
+     <Quote />
+   </main>
+  );
+};
+
+export default index;

src/components/Home/Hero.js

@@ -1,43 +1,12 @@
-import React, {useState} from 'react';
+import React from 'react';
 
 const Hero = () => {
-
-  const [submitted,
-    setSubmitted] = useState('')
-
   return (
-    <section className="hero mt-32 sm:mt-48 mb-24 px-6 sm:px-8 md:px-10">
-      <div className="max-w-5xl mx-auto">
-        <div className="hero-container max-w-2xl text-center sm:text-left">
-          <h1
-            className="hero-title font-display text-5xl sm:text-6xl font-bold text-primary">Meet Asteria Protocol</h1>
-          <div className="hero-subtitle text-xl text-grey70 mt-4">
-            New standard to treat and store user data that makes privacy and security
-            accessible to all.
-          </div>
-          <form
-            action="https://docs.google.com/forms/d/e/1FAIpQLSfzv2VtO6S7hE4KKXCAszJspfcBp3C4ZlPdEMAa6T3J69ZNkg/formResponse"
-            className={`${submitted} hero-cta mt-16`}
-            target="hidden_iframe"
-           >
-            <input
-              name="entry.1532827602"
-              className="bg-grey250 px-6 py-4 min-w-full sm:min-w-auto sm:w-84 outline-none rounded sm:rounded-r-none text-center sm:text-left"
-              type="email"
-              placeholder="Your Email"
-              required/>
-            <input
-              className='mt-2 sm:mt-0 min-w-full sm:min-w-auto sm:w-auto bg-primary text-white px-6 py-4 rounded sm:rounded-l-none cursor-pointer'
-              value="Get Monthly Updates"
-              onClick={()=>{setSubmitted('submitted')}}
-              type="submit"/>
-          </form>
-
-          <iframe title="hidden_iframe" name="hidden_iframe" id="hidden_iframe" className="hidden"></iframe>
-
-          <div className={`${submitted} form-feedback mt-6 text-variant2 font-bold`}>Thank you for signing up for updates on Asteria Protocol.</div>
-
-        </div>
+    <section className="hero mt-40 mb-40 px-6 sm:px-8 md:px-10">
+      <div className="max-w-4xl mx-auto font-light text-4xl">
+        <p>
+          <span className="font-bold">Hapramp Studio</span> is an idea lab -- Working on the ideas that emerge from the confluence of the Creative Industry and Information Economy.
+        </p>
       </div>
     </section>
   );

src/components/Home/Products.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import {Link} from 'react-router-dom';
+
+import gosocial from './img/gosocial.jpg'
+import oneramp from './img/1ramp.jpg';
+import asteria from './img/asteria.jpg';
+
+const Products = () => {
+  return (
+    <section className="products">
+      <div className="max-w-4xl mx-auto">
+        <h2 className="text-xl uppercase font-bold">Ideas we are working on</h2>
+        {/* Go Social App */}
+        <div className="flex mt-16 border-b pb-10">
+          <img src={gosocial} alt="Go Social App Logo"/>
+          <div className="md:ml-12">
+            <h3 className="text-4xl font-display">Go.Social</h3>
+            <p className="mt-4 text-lg">Inspiring humans to take on a digital journey of their lifetime. A platform where you learn, explore, create, and grow as a creative individual.</p>
+            <a className="mt-8 inline-block underline font-bold" href="https://gosocialapp.co" target="_new">LET’S GO</a>
+          </div>
+        </div>
+
+        {/* 1ramp.io */}
+        <div className="flex mt-16 border-b pb-10">
+          <img src={oneramp} alt="1ramp App Logo"/>
+          <div className="md:ml-12">
+            <h3 className="text-4xl font-display">1Ramp.io</h3>
+            <p className="mt-4 text-lg">Social media platform for creative communities. Where creators earn cryptocurrency for every like they get. Powered by <a className="font-bold underline" href="https://steem.com">Steem</a> Blockchain.</p>
+            <div>Available for <a className="mt-8 inline-block underline font-bold" href="https://gosocialapp.co" target="_new">Android</a> and <a className="mt-8 inline-block underline font-bold" href="https://gosocialapp.co" target="_new">Web</a></div>
+          </div>
+        </div>
+
+        {/* Asteria */}
+        <div className="flex mt-16 pb-10">
+          <img src={asteria} alt="Asteria App Logo"/>
+          <div className="md:ml-12">
+            <h3 className="text-4xl font-display">Asteria Protocol</h3>
+            <p className="mt-4 text-lg">New standard to treat and store user data that makes privacy and security accessible to all.</p>
+            <a className="mt-8 inline-block underline font-bold" href="https://gosocialapp.co" target="_new">LEARN MORE</a>
+          </div>
+        </div>
+
+        {/* Link Group */}
+        <div className="text-3xl font-display font-bold mb-20">
+          <Link className="mr-8 hover:underline" to="/about">about us</Link>
+          <Link className="hover:underline" to="/work">work with us</Link>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export default Products;

src/components/Home/index.js

@@ -1,28 +1,14 @@
 import React from 'react';
-import './Hero';
 import Hero from './Hero';
-import Feature from './Feature'
-import Quote from './Quote'
-import OneRamp from './OneRamp'
-import Team from './Team'
-import Mentors from './Mentors'
-import Associations from './Associations'
-import Hiring from './Hiring'
-import Footer from './Footer'
+import Products from './Products';
 
 const index = () => {
   return (
-   <main>
-     <Hero />
-     <Feature />
-     <Quote />
-     <OneRamp />
-     <Team />
-     <Mentors />
-     <Associations />
-     <Hiring />
-     <Footer />
-   </main>
+    <div>
+      <Hero />
+      <Products />  
+    </div>
+
   );
 };
 

src/components/Layout/Footer.js

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import linkedIn from './img/social/linkedin.svg';
+import twitter from './img/social/twitter.svg';
+import medium from './img/social/medium.svg';
+
+const Footer = () => {
+  return (
+    <footer className="bg-black py-6 text-white px-4 sm:px-8 md:px-10">
+      <div className="max-w-4xl mx-auto flex-col md:flex-row flex md:justify-between items-center">
+        <div className="md:max-w-md lg:max-w-lg">
+          <h2 className="font-display text-4xl font-bold">HAPRAMP STUDIO</h2>
+        </div>
+
+        <div className="mt-10 md:mt-0 md:ml-4">
+          <div className="flex items-center">
+            <a href="mailto:[email protected]" className="mr-6">[email protected]</a>
+            <a href="https://twitter.com/hapramp" className="mr-6"  target="__new"><img src={twitter} alt="Twiiter Social Icon"/></a>
+            <a href="https://www.linkedin.com/company/hapramp/"  className="mr-6" target="__new"><img src={linkedIn} alt="LinkedIn Social Icon"/></a>
+            <a href="https://medium.com/hapramp" target="__new"><img src={medium} alt="Medium Social Icon"/></a>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+};
+
+export default Footer;

src/components/Layout/Header.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import {NavLink} from 'react-router-dom';
+
+const Header = () => {
+  return (
+    <header className="py-4 px-4 sm:px-8 md:px-10">
+      <div className="max-w-5xl mx-auto flex-col md:flex-row flex md:justify-between items-center">
+      <div className="md:max-w-md lg:max-w-lg">
+          <h2 className="font-display text-2xl font-bold"><NavLink to="/">HAPRAMP</NavLink></h2>
+
+        </div>
+
+        <div className="mt-10 md:mt-0 md:ml-4">
+          <div className="flex items-center font-bold text-grey54">
+            <NavLink className="mr-6" to="/about">about us</NavLink>
+            <NavLink to="/work">work with us</NavLink>
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+};
+
+export default Header;