chore/adding image assets header component 📃

client/package.json

@@ -40,5 +40,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26"
   }
 }

client/public/index.html

@@ -15,6 +15,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet"> 
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

client/src/App.tsx

@@ -1,24 +1,9 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
+// import pages that makes up the app
+import LandingPage from "./pages/Landing";
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <LandingPage />
     </div>
   );
 }

client/src/components/Header/Header.styles.ts

@@ -0,0 +1,73 @@
+import styled from "styled-components";
+
+export const HeaderContainer = styled.div`
+   display : flex;
+   justify-content : space-between;
+   padding : 2.5rem 2rem;
+
+`
+
+export const LogoContainer = styled.div`
+  display : flex;
+  justify-content : center;
+  align-items : center;
+  gap: 0.3rem;
+`
+
+export const Logo = styled.img`
+   width : 1.5rem;
+   height: 2rem;
+`
+
+export const LogoHeader = styled.p`
+  font-size : 1rem;
+  font-family: 'Space Grotesk';
+  font-style: normal;
+  font-weight: 400;
+`
+
+export const HeaderConnectContainer = styled.div`
+   display : flex;
+   gap : 2rem;
+   margin : 0rem 5rem 0rem 0rem;
+
+   p {
+    display : flex;
+    justify-content : center;
+    align-items : center;
+    gap : 0.4rem;
+
+    span {
+        font-family: 'Space Grotesk';
+        font-style: normal;
+        font-weight: 500; 
+        font-size : 1rem;
+     }
+     img {
+        width : 1.5rem;
+     }
+
+    }
+
+`
+export const HeaderConnectWallet = styled.button`
+   display : flex;
+   gap: 0.7rem;
+   border: solid 1px #000000;
+   justify-content : center;
+   align-items : center;
+   background : #ffffff;
+   border-radius : 0.3rem;
+   padding : 0.5rem 1rem;
+
+   img {
+    width : 1.1rem;
+   }
+
+   span {
+    font-family: 'Space Grotesk';
+    font-style: normal;
+    font-weight: 500; 
+    font-size : 1rem;
+   }
+`

client/src/components/Header/Header.tsx

@@ -0,0 +1,26 @@
+//import relevant modules
+
+import { HeaderConnectContainer, HeaderConnectWallet, HeaderContainer, Logo, LogoContainer, LogoHeader } from "./Header.styles";
+
+const Header = () => {
+   return (
+     <HeaderContainer>
+      <LogoContainer>
+        <Logo src="/assets/logo.png" alt="solpayplus icon"/>
+        <LogoHeader>SolPayPlus</LogoHeader>
+      </LogoContainer>
+      <HeaderConnectContainer>
+        <p>
+          <img src="/assets/Gift.png" alt=""/>
+          <span>Rewards</span>
+        </p>
+        <HeaderConnectWallet>
+            <span> Connect Wallet</span>
+            <img src="/assets/Wallet.png" alt="connect wallet" />
+        </HeaderConnectWallet>
+      </HeaderConnectContainer>
+     </HeaderContainer>
+   );
+}
+
+export default Header;

client/src/index.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
+import { GlobalStyle } from './styles/global';
 
 
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );
 root.render(
   <React.StrictMode>
+    <GlobalStyle />
     <App />
   </React.StrictMode>
 );

client/src/pages/Landing.tsx

@@ -0,0 +1,14 @@
+// import components that makes the Landing Page
+
+import Header from "../components/Header/Header";
+
+const LandingPage = () => {
+    return (
+      <div className="landing">
+        <Header/>
+      </div>
+      );
+}
+
+export default LandingPage;
+

client/src/styles/global.ts

@@ -17,6 +17,12 @@ export const GlobalStyle = createGlobalStyle`
     margin:0; 
     width:100%;
     overflow-x : hidden;
+    background : url('/assets/bg.png');
+    background-size: cover;
+  }
+
+  .landing {
+
   }
 
   html {