diff --git a/src/pages/Card/Card.page.jsx b/src/pages/Card/Card.page.jsx
new file mode 100644
index 000000000..0b6a8b4bd
--- /dev/null
+++ b/src/pages/Card/Card.page.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Container = styled.div`
+ width: 22%;
+ border-style: solid;
+ margin: 1em;
+ border-radius: 1em;
+ display: flex;
+ justify-content: space-between;
+ float: left;
+ background-color: #d47b7b;
+ word-wrap: break-word;
+`;
+
+function Card({ title, description, image, width, height }) {
+ return (
+
+
+
+ {title}
+ 
+ {description}
+
+
+
Hello stranger!
- {authenticated ? (
- <>
- Good to have you back
-
-
- ← logout
-
-
- show me something cool →
-
-
- ) : (
- let me in →
- )}
-
- );
+ return (
+
+
+ {mockedData.items.map((item) => (
+
+ ))}
+
+ );
}
export default HomePage;
diff --git a/src/pages/Home/Home.page.test.jsx b/src/pages/Home/Home.page.test.jsx
new file mode 100644
index 000000000..149a4ea9d
--- /dev/null
+++ b/src/pages/Home/Home.page.test.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import HomePage from '.';
+
+describe('Home Component tests', () => {
+ it('Header Section Contains search button defined', () => {
+ render();
+ expect(screen.getByText('🔍')).toBeDefined();
+ });
+
+ it('Header Section Contains search button defined', () => {
+ render();
+ expect(screen.getByText('☰')).toBeDefined();
+ });
+
+ it('Header Section Contains search input defined', () => {
+ render();
+ expect(screen.getByPlaceholderText('Search the site...')).toBeDefined();
+ });
+
+ it('Card Section Contain title', () => {
+ render();
+ expect(
+ screen.getByText('Video Tour | Welcome to Wizeline Guadalajara').tagName
+ ).toBe('H2');
+ });
+ it('Card Section Contain Description', () => {
+ render();
+ expect(
+ screen.getByText(
+ 'Follow Hector Padilla, Wizeline Director of Engineering, for a lively tour of our office. In 2018, Wizeline opened its stunning new office in Guadalajara, Jalisco, ...'
+ ).tagName
+ ).toBe('P');
+ });
+ it('Card Section Contain image', () => {
+ render();
+ expect(
+ screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara').tagName
+ ).toBe('IMG');
+ });
+ it('Card Section image size width', () => {
+ render();
+
+ const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
+
+ expect(image.width).toEqual(120);
+ });
+ it('Card Section image size height', () => {
+ render();
+ const image = screen.getByAltText('Video Tour | Welcome to Wizeline Guadalajara');
+ expect(image.height).toEqual(90);
+ });
+});
diff --git a/src/pages/Login/Login.page.jsx b/src/pages/Login/Login.page.jsx
deleted file mode 100644
index 89367f276..000000000
--- a/src/pages/Login/Login.page.jsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from 'react';
-import { useHistory } from 'react-router';
-
-import { useAuth } from '../../providers/Auth';
-import './Login.styles.css';
-
-function LoginPage() {
- const { login } = useAuth();
- const history = useHistory();
-
- function authenticate(event) {
- event.preventDefault();
- login();
- history.push('/secret');
- }
-
- return (
-
- );
-}
-
-export default LoginPage;
diff --git a/src/pages/Login/Login.styles.css b/src/pages/Login/Login.styles.css
deleted file mode 100644
index d4cfdde73..000000000
--- a/src/pages/Login/Login.styles.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.login {
- width: 300px;
-}
-
-.login h1 {
- text-align: center;
- letter-spacing: -1px;
-}
-
-.login-form {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-.form-group {
- width: 100%;
- display: flex;
- flex-direction: column;
- margin-bottom: 1rem;
-}
-
-.form-group strong {
- display: block;
- font-weight: 700;
- text-transform: capitalize;
- margin-bottom: 0.4rem;
-}
-
-.form-group input {
- color: white;
- font-size: 1.2rem;
- width: 100%;
- padding: 0.4rem 0.6rem;
- border-radius: 3px;
- border: 1px solid white;
- background-color: rgba(0, 0, 0, 0.1);
-}
-
-.login-form button[type='submit'] {
- width: 5rem;
- margin-top: 1rem;
- padding: 0.4rem 0.6rem;
- font-size: 1.2rem;
- border: none;
- border-radius: 3px;
-}
diff --git a/src/pages/Login/index.js b/src/pages/Login/index.js
deleted file mode 100644
index c9af65e37..000000000
--- a/src/pages/Login/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Login.page';
diff --git a/src/pages/NotFound/NotFound.page.jsx b/src/pages/NotFound/NotFound.page.jsx
deleted file mode 100644
index 8b05bbe62..000000000
--- a/src/pages/NotFound/NotFound.page.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import './NotFound.styles.css';
-
-function NotFoundPage() {
- return (
-
-
- home
-
- 
-
- );
-}
-
-export default NotFoundPage;
diff --git a/src/pages/NotFound/NotFound.styles.css b/src/pages/NotFound/NotFound.styles.css
deleted file mode 100644
index 07437df2e..000000000
--- a/src/pages/NotFound/NotFound.styles.css
+++ /dev/null
@@ -1,13 +0,0 @@
-.home-link {
- font-size: 1rem;
- text-decoration: none;
- display: block;
- text-align: right;
- padding: 0.2rem 0.3rem;
-}
-
-.home-link::before {
- content: '←';
- padding-right: 0.2rem;
- display: inline-block;
-}
diff --git a/src/pages/NotFound/index.js b/src/pages/NotFound/index.js
deleted file mode 100644
index 981f67f46..000000000
--- a/src/pages/NotFound/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './NotFound.page';
diff --git a/src/pages/Secret/Secret.page.jsx b/src/pages/Secret/Secret.page.jsx
deleted file mode 100644
index bb9df9b2d..000000000
--- a/src/pages/Secret/Secret.page.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-function SecretPage() {
- return (
-
-
- welcome, voyager...
- ← go back
-
-
-
- );
-}
-
-export default SecretPage;
diff --git a/src/pages/Secret/index.js b/src/pages/Secret/index.js
deleted file mode 100644
index 894d9a95f..000000000
--- a/src/pages/Secret/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './Secret.page';
diff --git a/src/providers/Auth/Auth.provider.jsx b/src/providers/Auth/Auth.provider.jsx
deleted file mode 100644
index b47385253..000000000
--- a/src/providers/Auth/Auth.provider.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState, useEffect, useContext, useCallback } from 'react';
-
-import { AUTH_STORAGE_KEY } from '../../utils/constants';
-import { storage } from '../../utils/storage';
-
-const AuthContext = React.createContext(null);
-
-function useAuth() {
- const context = useContext(AuthContext);
- if (!context) {
- throw new Error(`Can't use "useAuth" without an AuthProvider!`);
- }
- return context;
-}
-
-function AuthProvider({ children }) {
- const [authenticated, setAuthenticated] = useState(false);
-
- useEffect(() => {
- const lastAuthState = storage.get(AUTH_STORAGE_KEY);
- const isAuthenticated = Boolean(lastAuthState);
-
- setAuthenticated(isAuthenticated);
- }, []);
-
- const login = useCallback(() => {
- setAuthenticated(true);
- storage.set(AUTH_STORAGE_KEY, true);
- }, []);
-
- const logout = useCallback(() => {
- setAuthenticated(false);
- storage.set(AUTH_STORAGE_KEY, false);
- }, []);
-
- return (
-
- {children}
-
- );
-}
-
-export { useAuth };
-export default AuthProvider;
diff --git a/src/providers/Auth/index.js b/src/providers/Auth/index.js
deleted file mode 100644
index 5dfdfd12d..000000000
--- a/src/providers/Auth/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default, useAuth } from './Auth.provider';
diff --git a/src/utils/constants.js b/src/utils/constants.js
deleted file mode 100644
index 361273c9c..000000000
--- a/src/utils/constants.js
+++ /dev/null
@@ -1,3 +0,0 @@
-const AUTH_STORAGE_KEY = 'wa_cert_authenticated';
-
-export { AUTH_STORAGE_KEY };
diff --git a/src/utils/fns.js b/src/utils/fns.js
deleted file mode 100644
index 68e42f387..000000000
--- a/src/utils/fns.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function random(limit) {
- return Math.floor(Math.random() * limit);
-}
-
-export { random };
diff --git a/src/utils/hooks/useFortune.js b/src/utils/hooks/useFortune.js
deleted file mode 100644
index b6f572a07..000000000
--- a/src/utils/hooks/useFortune.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useState, useEffect } from 'react';
-
-import { random } from '../fns';
-
-const API_URL = 'http://fortunecookieapi.herokuapp.com/v1/fortunes?limit=10';
-
-function useFortune() {
- const [fortune, setFortune] = useState(null);
-
- useEffect(() => {
- async function findMyFortune() {
- try {
- const response = await fetch(API_URL);
- const fortuneCookies = await response.json();
-
- const randomIndex = random(fortuneCookies.length);
- const currentFortune = fortuneCookies[randomIndex];
-
- setFortune(currentFortune.message);
- } catch (error) {
- console.error('Bad fortune: ', error);
- }
- }
-
- findMyFortune();
- }, []);
-
- return { fortune };
-}
-
-export { useFortune };
diff --git a/src/utils/storage.js b/src/utils/storage.js
deleted file mode 100644
index c7981151b..000000000
--- a/src/utils/storage.js
+++ /dev/null
@@ -1,17 +0,0 @@
-const storage = {
- get(key) {
- try {
- const rawValue = window.localStorage.getItem(key);
- return JSON.parse(rawValue);
- } catch (error) {
- console.error(`Error parsing storage item "${key}".`);
- return null;
- }
- },
-
- set(key, value) {
- window.localStorage.setItem(key, JSON.stringify(value));
- },
-};
-
-export { storage };