added home page & applo client

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@apollo/client": "^3.4.17",
     "@babel/core": "7.15.8",
     "@babel/preset-env": "^7.16.0",
     "@babel/preset-flow": "^7.16.0",
@@ -14,6 +15,7 @@
     "bcryptjs": "^2.4.3",
     "feather-icons-react": "^0.5.0",
     "firebase": "^9.4.0",
+    "graphql": "^16.0.1",
     "moment": "^2.29.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/components/home/homeComponent.jsx

@@ -1,12 +1,31 @@
 import React from 'react';
 import { Footer } from '../common';
 import Header from '../common/header';
-
+import { HomeContainer, HomeBannerOverlapper } from './styledComponents';
+import bookTownImg from '../../assets/book-img-1.png';
+import {Button} from '../common';
 function HomeComponent(props) {
     return (
         <div>
             <Header/>
-            <h1>Home</h1>
+                <HomeContainer>
+                    <img src={bookTownImg}/>
+                    <HomeBannerOverlapper>
+                       <div className='banner-overlapper-title'>
+                            <span>BookTown</span>
+                       </div>
+                       <p className='banner-overlapper-slogan'>
+                           Read more, Gain more, Win more
+                       </p>
+                       <p className='banner-overlapper-text'>
+                           Sell & Buy old and new books here
+                       </p>
+                       <div className='overlapper-btn-container'>
+                          <Button className='overlapper-btn overlapper-btn-black' text='Sell Now'/> 
+                          <Button className='overlapper-btn' text='Buy Now'/> 
+                       </div>
+                    </HomeBannerOverlapper>
+                </HomeContainer>
             <Footer/>
         </div>
     );

src/components/home/styledComponents.js

@@ -0,0 +1,49 @@
+import styled from 'styled-components';
+export const HomeContainer = styled.div`
+  width: 99vw;
+  height: 100vh;
+  z-index: -1;
+  display: flex;
+  position: relative;
+  img {
+    object-fit: fill;
+    height: 100%;
+    width: 99vw;
+  }
+`;
+
+export const HomeBannerOverlapper = styled.div`
+  width: 390px;
+  flex-direction: column;
+  z-index: 10;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 5%;
+  .banner-overlapper-title {
+    ${(props) => ({ ...props.theme.fonts.h1 })}
+    color: ${(props) => props.theme.colors.secondary};
+  }
+  .banner-overlapper-slogan {
+    color: ${(props) => props.theme.colors.secondary};
+    ${(props) => ({ ...props.theme.fonts.h5 })}
+  }
+  .banner-overlapper-text {
+    color: black;
+    ${(props) => ({ ...props.theme.fonts.body1 })}
+  }
+  .overlapper-btn-container {
+    display: flex;
+    justify-content: space-between;
+  }
+  .overlapper-btn {
+    width: 150px;
+    height: 50px;
+    background-color: ${(props) => props.theme.colors.primary};
+    color: ${(props) => props.theme.colors.secondary};
+  }
+  .overlapper-btn-black {
+    background-color: ${(props) => props.theme.colors.secondary};
+    color: ${(props) => props.theme.colors.primary};
+  }
+`;

src/index.js

@@ -1,23 +1,31 @@
+import { ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
-import Store from './config/redux/store';
-import TheBookTownApplication from './router';
 import { ThemeProvider } from 'styled-components';
 import theme from './config/appTheme';
+import './config/firebase/firebaseconfig';
+import Store from './config/redux/store';
 import ErrorContextProvider from './contextProviders/ErrorContextProvider';
+import './index.css';
+import TheBookTownApplication from './router';
+
+const client = new ApolloClient({
+  uri: 'https://48p1r2roz4.sse.codesandbox.io',
+  cache: new InMemoryCache()
+});
 
-import './config/firebase/firebaseconfig';
 ReactDOM.render(
   <React.StrictMode>
     <Provider store={Store}>
       <Router>
         <ThemeProvider theme={theme}>
-          <ErrorContextProvider>
-            <TheBookTownApplication />
-          </ErrorContextProvider>
+          <ApolloProvider client={client}>
+            <ErrorContextProvider>
+              <TheBookTownApplication />
+            </ErrorContextProvider>
+          </ApolloProvider>
         </ThemeProvider>
       </Router>
     </Provider>