Landing Page Done

public/index.html

@@ -24,6 +24,15 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Poppins:ital,wght@0,200;1,400&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&family=Poppins:ital,wght@0,200;0,300;1,400&display=swap" rel="stylesheet">
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Inter&family=Montserrat:wght@500&family=Poppins:ital,wght@0,200;0,300;1,400&display=swap" rel="stylesheet">
     <style>
       /* width */
       ::-webkit-scrollbar {

src/components/DataSection.css

@@ -1,5 +1,8 @@
 .data{
     display: flex;
+    font-family: "poppins";
+    font-size: 20px;
+    text-align: left;
   }
   .data p{
     text-align: center;
@@ -31,6 +34,9 @@
     padding: 4px; 
     margin: 10px;
     margin-top: -15px;
+    font-family: "poppins";
+    font-size: 10px;
+
     /* left: 2%; */
   }
   .scroll-container{

src/components/main_body.css

@@ -1,3 +1,4 @@
+
 .master_container{
     height: 100vh;
     background-color: rgba(128, 128, 128, 0.288);
@@ -43,10 +44,11 @@ img{
 }
 
 .username{
-    font-size: 30px;
+    font-size: 24px;
     font-weight: 600;
     text-align: center;
     margin-top: 0.5vh;
+    font-family: "poppins";
 }
 
 .sub_name{
@@ -60,6 +62,10 @@ img{
     width: 30%;
     height: 35vh;
     align-items: center;
+    font-family: "poppins";
+    font-size: 14px;
+
+    /* background: #FFFFEC; */
     /* border: 2px solid red; */
 }
 
@@ -69,10 +75,12 @@ img{
     font-weight: 700;
     text-align: center;
     margin-bottom: 1vh;
+    font-family: "montserrat";
 }
 
 .parent_button{
     display: flex;
     flex-direction: column;
     gap: 2vh;
-}
+}
+

src/components/main_body.js

@@ -35,18 +35,20 @@ const Content = () => {
             </div>
             <div className='parent_button'>
             <div className="web3Button">
-            <Web3Button 
-                        contractAddress= {contractAddress}
-                        action={(contract) => contract.call(
-                            "showUser",
-                            [],{from: userAddress}
-                        )}
-                        onSuccess={(results)=>{
-                            console.log(results);
-                        }}
-                        style={{backgroundColor: 'white',color: 'black',fontSize: '25px'}}
-
-            > Button 1</Web3Button>
+              <Web3Button 
+                  contractAddress= {contractAddress}
+                  action={(contract) => contract.call(
+                      "addUser",
+                      [userAddress],{from: userAddress}
+                  )}
+                  onSuccess={(results)=>{
+					toast.success('User Added to DocChain', {position: "top-right",autoClose: 5000,hideProgressBar: false,closeOnClick: true,pauseOnHover: true,draggable: true,progress: undefined,theme: "dark"}); 	
+                  }}
+                  onError={(error)=>{
+					toast.error('User Already Exists', {position: "top-right",autoClose: 5000,hideProgressBar: false,closeOnClick: true,pauseOnHover: true,draggable: true,progress: undefined,theme: "dark"}); 
+                  }}
+                  style={{backgroundColor: '#FFFFEC',color: 'black',fontSize: '20px', fontFamily: 'poppins'}}            
+              > Add Yourself </Web3Button>
             </div>
             <div className="web3Button">
             <Web3Button 
@@ -72,7 +74,7 @@ const Content = () => {
                         onSuccess={(results)=>{
                             console.log(results);
                         }}
-                        style={{backgroundColor: 'white',color: 'black',fontSize: '25px'}}
+                        style={{backgroundColor: '#FFFFEC',color: 'black',fontSize: '20px', fontFamily: 'poppins'}}
 
             > Button 3</Web3Button>
             </div>
@@ -86,7 +88,7 @@ const Content = () => {
                         onSuccess={(results)=>{
                             console.log(results);
                         }}
-                        style={{backgroundColor: 'white',color: 'black',fontSize: '25px'}}
+                        style={{backgroundColor: '#FFFFEC',color: 'black',fontSize: '20px', fontFamily: 'poppins'}}
 
             > Button 4</Web3Button>
             </div>

src/components/navbar.css

@@ -11,6 +11,7 @@
     /* border: 2px solid red; */
     background-color: #FFFFFF;
     align-items: center;
+    font-family: "inter";
 }
 
 .navbar_right{

src/index.js

@@ -5,6 +5,7 @@ import reportWebVitals from "./reportWebVitals";
 import { ThirdwebProvider } from "@thirdweb-dev/react";
 import "./styles/globals.css";
 import { Sepolia } from "@thirdweb-dev/chains"
+import LandingPage from "./landingPage/landingPage.jsx";
 
 // This is the chain your dApp will work on.
 // Change this to the chain your app is built for.
@@ -19,7 +20,8 @@ root.render(
       activeChain={activeChain}
       clientId={process.env.REACT_APP_TEMPLATE_CLIENT_ID}
     >
-      <App />
+      {/* <App /> */}
+      <LandingPage />
     </ThirdwebProvider>
   </React.StrictMode>
 );

src/landingPage/landingPage.css

@@ -0,0 +1,89 @@
+@header-font{
+    font-family: petrona;
+    src: url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,300&display=swap');
+}
+
+@header-font-chain{
+    font-family: petrona_bold;
+    src: url('https://fonts.googleapis.com/css2?family=Petrona:ital,wght@1,300;1,500&display=swap');
+}
+
+html, body{
+    height: 100%;
+    background: linear-gradient(135deg, #0B1623, #439E9F, #217974);
+    margin: 0;
+    padding: 0;
+}
+header {
+    color: #FFFFEC;
+    padding: 10px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.landingPg {
+
+    color: #FFFFEC; /* Set text color to white */
+    padding: 20px; /* Add padding for better readability */
+}
+
+.landingPg .header-left .logo span {
+    font-family: Petrona;
+    font-weight: 300; /* Light */
+    font-style: italic;
+    font-size: 36px;
+}
+
+.landingPg .header-left .logo span.chain {
+    font-family: Petrona;
+    font-weight: 600; /* Light */
+    font-style: italic;
+    font-size: 36px;
+}
+
+.header-right a {
+    color: #fff;
+    margin-right: 35px;
+    text-decoration: none;
+    font-family: Inter;
+    padding-left: 25px;
+    font-weight:500;
+}
+
+.main{
+    font-size:95px;
+    font-family: Montserrat;
+    font-weight: 600;
+    margin: 30px;
+    margin-left: 2 rem;
+    /* display: flex;
+    align-items: left; */
+}
+
+.button{
+    /* font-size: 20px;
+    font-family: Poppins;
+    padding: 10px 24px;
+    text-align: center;
+    display: flex;
+    justify-content: flex-start;
+    border-radius: 8px;
+     */
+     color: #122631;
+text-align: center;
+font-family: Poppins;
+font-size: 24px;
+font-style: normal;
+font-weight: 600;
+line-height: 28px; /* 116.667% */
+     display: inline-flex;
+padding: 20px 34px;
+justify-content: center;
+align-items: center;
+gap: 10px;
+     border-radius: 25px;
+background: #FFFFEC;
+margin: 30px;
+box-shadow: 0px 7px 16px 0px rgba(7, 18, 24, 0.18), 0px 29px 29px 0px rgba(7, 18, 24, 0.15), 0px 66px 40px 0px rgba(7, 18, 24, 0.09), 0px 118px 47px 0px rgba(7, 18, 24, 0.03), 0px 184px 52px 0px rgba(7, 18, 24, 0.00);
+}

src/landingPage/landingPage.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+const YourComponent = () => {
+  return (
+    <div className="landingPg">
+      <header>
+        <div className="header-left">
+          <a className="logo">
+            <span>Doc</span>
+            <span className="chain">Chain</span>
+          </a>
+        </div>
+        <div className="header-right">
+          <a><b>About Us</b></a>
+          <a><b>Contacts</b></a>
+        </div>
+      </header>
+      <hr className="line" /><br /><br /><br /><br /><br /><br />
+
+      <div className="main">
+        <div>Secure Your</div>
+        <div>Identity</div>
+      </div>
+
+      <button className="button">Connect Your Wallet</button>
+    </div>
+  );
+};
+
+export default YourComponent;

yarn.lock

@@ -2592,11 +2592,6 @@
   resolved "https://registry.npmjs.org/@paperxyz/sdk-common-utilities/-/sdk-common-utilities-0.1.1.tgz"
   integrity sha512-RefjXB3d5Ub1I3GoIf/mfgTsvmAneWoeQwpmiuXYx1NmmSdbtBxDUk4POtSWUCnvoiJP0Y2frATnYMV30J1b1A==
 
-"@parcel/watcher-darwin-arm64@2.4.0":
-  version "2.4.0"
-  resolved "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.4.0.tgz"
-  integrity sha512-T/At5pansFuQ8VJLRx0C6C87cgfqIYhW2N/kBfLCUvDhCah0EnLLwaD/6MW3ux+rpgkpQAnMELOCTKlbwncwiA==
-
 "@parcel/watcher-wasm@2.3.0":
   version "2.3.0"
   resolved "https://registry.npmjs.org/@parcel/watcher-wasm/-/watcher-wasm-2.3.0.tgz"
@@ -8114,11 +8109,6 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
-  version "2.3.3"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
-  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
 function-bind@^1.1.1, function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"