created the Footer, a Info landing page and related styles

heldrida · Feb 14, 2020 · f231120 · f231120
1 parent 91a515e
commit f231120
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 2 deletions.
diff --git a/public/index.html b/public/index.html
@@ -26,7 +26,7 @@
     -->
     <title>Punkbit - REACT Star Wars SWAPI GRAPHQL WRAPPER API</title>
     <style>
-      @import url("https://fonts.googleapis.com/css?family=Fredoka+One|Nunito:400,800&display=swap");
+      @import url("https://fonts.googleapis.com/css?family=Nunito:400,800&display=swap");
     </style>
   </head>
   <body>

diff --git a/src/App.tsx b/src/App.tsx
@@ -5,6 +5,8 @@ import { ThemeProvider } from "styled-components";
 import { themeConf, DefaultStyles } from './styled'
 import { NavigationBar, BoxWrapper, Game } from './Components'
 import { GameProvider } from './Context'
+import Footer from './Components/Footer'
+import Info from './Components/Info'
 
 const App = () => {
   return (
@@ -13,6 +15,12 @@ const App = () => {
       <Router>
         <NavigationBar />
         <Switch>
+          <Route exact path="/">
+            <BoxWrapper>
+              <Info />
+              <Footer />
+            </BoxWrapper>
+          </Route>
           <Route exact path="/game">
             <BoxWrapper>
               <GameProvider>

diff --git a/src/Components/Footer/index.tsx b/src/Components/Footer/index.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import styled from 'styled-components'
+import { TPropFlag } from '../../Types'
+
+const FooterContainer = styled.div<TPropFlag>`
+  padding: 1rem 0;
+  color: ${(props: TPropFlag) => props.theme.color7};
+  opacity: 0.42;
+  text-align: right;
+`
+
+const FooterItem = styled.div`
+  font-size: 1rem;
+  font-family: "Nunito", sans-serif;
+
+  & > a {
+    font-weight: bold;
+    text-decoration: none;
+    color: ${(props: TPropFlag) => props.theme.color7}
+  }
+`
+
+const Footer = () => (
+  <FooterContainer>
+    <FooterItem>Created by <a href="http://punkbit.com">Punkbit</a> 2020</FooterItem>
+  </FooterContainer>
+)
+
+export default Footer
diff --git a/src/Components/Info/index.tsx b/src/Components/Info/index.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import styled from 'styled-components'
+import { TPropFlag } from '../../Types'
+import CtaButton from '../CtaButton'
+import { Link } from 'react-router-dom'
+
+const InfoContainer = styled.div<TPropFlag>`
+  padding: 1rem 0;
+  color: ${(props: TPropFlag) => props.theme.darkText};
+  opacity: 0.42;
+  font-size: 2rem;
+
+  & > p {
+    font-size: 1.4rem;
+    line-height: 1.6;
+  }
+
+  & > a {
+    color: ${(props: TPropFlag) => props.theme.color7};
+  }
+`
+
+const Info = () => (
+  <InfoContainer>
+    <p>This projects depends on the <a href="http://graphql.org/swapi-graphql" target="_blank">GraphQl wrapper</a> for the Star Wars API; To avoid CORS or 405 (as confirmed after a reverse proxy at the time of writting, might be different today), run the following <a href="https://docs.docker.com/install/" target="_blank">Docker</a> and <a href="https://github.com/heldrida/react-star-wars-swapi-graphql" target="_blank">service</a> locally.</p>
+    <p>If you're checking a live preview link, have in mind that the Graphql API might be down at any time, so please find the project source code in my <a href="https://github.com/heldrida" target="_blank">Github</a> account and run the project by following the instructions provided in the README file. I wrote this project after a request by a company, but put a bit more work to have the following stack available openly: React v16.8, GraphQl w/ Apollo, Hooks effects, memo Cb and local state, styled-components; Javascript + TypeScript, popmotion, etc. Also, Docker!</p>
+    <p>Should update the project whenever possible, so you might find a few performance issues in the animations or transitions, solely Desktop tested and developed in Firefox Quantum and Chrome Thanks for reading!</p>
+    <Link to='/game'>
+      <CtaButton>To proceed...</CtaButton>
+    </Link>
+  </InfoContainer>
+)
+
+export default Info
diff --git a/src/Components/index.tsx b/src/Components/index.tsx
@@ -8,4 +8,6 @@ export { default as SelectBox } from './SelectBox'
 export { default as Game } from './Game'
 export { default as GameBoard } from './GameBoard'
 export { default as GameCard } from './GameCard'
-export { default as CtaButton } from './CtaButton'
+export { default as CtaButton } from './CtaButton'
+export { default as Footer } from './Footer'
+export { default as Info } from './Info'
diff --git a/src/styled.ts b/src/styled.ts
@@ -22,6 +22,9 @@ const themeConf: TThemeConf = {
 }
 
 const DefaultStyles = createGlobalStyle`
+* {
+  text-decoration: none;
+}
   body {
     padding: 0;
     margin: 0;
@@ -33,6 +36,9 @@ const DefaultStyles = createGlobalStyle`
     margin: 0;
     padding: 0;
   }
+  p, li, div, a {
+    font-family: "Nunito", sans-serif;
+  }
   *:focus {
     outline: none;
   }