chore(mobileLanding):card

- create mobile action page

src/components/auth/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link } from "react-router-dom";
+
+const cards = () => {
+  return (
+    <div className="flex justify-center w-full md:hidden ">
+      <div className="max-w-sm flex items-center h-screen overflow-hidden w-full">
+        <div className="flex justify-center items-center h-screen flex-col w-full">
+          <div className="flex flex-col items-center">
+            <a
+              href="/login"
+              className="bg-teal-500  text-white text-center text-xs w-32  uppercase  py-3 px-5 "
+            >
+              LOGIN
+            </a>
+
+            <a 
+              href="/login"
+              className="bg-white-500 mt-6  text-center border border-red-500  w-32 text-xs py-3 px-1 uppercase text-red-600"
+            >
+              get started
+            </a>
+
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default cards;

src/routes/AppRouter.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';
 import Homepage from '../pages/hompage';
+import Card from '../components/auth';
 
 const Routes = () => (
   <Switch>
     <Route path="/" exact component={Homepage} />
+    <Route path="/card" exact component={Card} />
   </Switch>
 );
 

tests/__snapshots__/App.spec.js.snap

@@ -148,5 +148,10 @@ exports[`Application test should work fine on Routes 1`] = `
     exact={true}
     path="/"
   />
+  <Route
+    component={[Function]}
+    exact={true}
+    path="/card"
+  />
 </Switch>
 `;

tests/__snapshots__/auth.spec.js.snap

@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Application test should renders without crashing 1`] = `
+<cards>
+  <div
+    className="flex justify-center w-full md:hidden "
+  >
+    <div
+      className="max-w-sm flex items-center h-screen overflow-hidden w-full"
+    >
+      <div
+        className="flex justify-center items-center h-screen flex-col w-full"
+      >
+        <div
+          className="flex flex-col items-center"
+        >
+          <a
+            className="bg-teal-500  text-white text-center text-xs w-32  uppercase  py-3 px-5 "
+            href="/login"
+          >
+            LOGIN
+          </a>
+          <a
+            className="bg-white-500 mt-6  text-center border border-red-500  w-32 text-xs py-3 px-1 uppercase text-red-600"
+            href="/login"
+          >
+            get started
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</cards>
+`;

tests/auth.spec.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import toJson from 'enzyme-to-json';
+import { mount } from './enzyme';
+import Auth from '../src/components/auth';
+
+
+describe('Application test', () => {
+  it('should renders without crashing', () => {
+    const wrapper = mount(<Auth />);
+    expect(toJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.find('a').length).toBeGreaterThan(1);
+    expect(wrapper.find('a')).toHaveLength(2);
+    expect(wrapper.find('[href="/login"]')).toHaveLength(2);
+  });
+});