From d9dbcca47d10e45e935c7c86848724fe24f7c0db Mon Sep 17 00:00:00 2001 From: Vaibhav Jangid <118388839+vaibhavj2111@users.noreply.github.com> Date: Tue, 30 Jan 2024 02:27:06 +0530 Subject: [PATCH 1/2] Landing Page Done --- package-lock.json | 1 - src/index.js | 4 +- src/landingPage/landingPage.css | 89 +++++++++++++++++++++++++++++++++ src/landingPage/landingPage.jsx | 30 +++++++++++ yarn.lock | 10 ---- 5 files changed, 122 insertions(+), 12 deletions(-) create mode 100644 src/landingPage/landingPage.css create mode 100644 src/landingPage/landingPage.jsx diff --git a/package-lock.json b/package-lock.json index 3bf1d52..dfcf9b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21398,7 +21398,6 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz", "integrity": "sha512-8VAmEm/ZAwQzJ+GOMLbBsTdDKOpuZh7RPs0UymvBR2vRk4iZWCskjbFnxqjrzoIvlNNRZ3QJFx6/qDSi6zSnaQ==", - "license": "MIT", "dependencies": { "@babel/core": "^7.16.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", diff --git a/src/index.js b/src/index.js index 6f06f90..3cd6a7b 100644 --- a/src/index.js +++ b/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} > - + {/* */} + ); diff --git a/src/landingPage/landingPage.css b/src/landingPage/landingPage.css new file mode 100644 index 0000000..9503c61 --- /dev/null +++ b/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); +} \ No newline at end of file diff --git a/src/landingPage/landingPage.jsx b/src/landingPage/landingPage.jsx new file mode 100644 index 0000000..e3af3ca --- /dev/null +++ b/src/landingPage/landingPage.jsx @@ -0,0 +1,30 @@ +import React from 'react'; + +const YourComponent = () => { + return ( +
+
+ + +
+






+ +
+
Secure Your
+
Identity
+
+ + +
+ ); +}; + +export default YourComponent; diff --git a/yarn.lock b/yarn.lock index e348437..2a07634 100644 --- a/yarn.lock +++ b/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" From b2940932c7aad900d5344cb3ef49fa1bfb0249ed Mon Sep 17 00:00:00 2001 From: Vaibhav Jangid <118388839+vaibhavj2111@users.noreply.github.com> Date: Wed, 31 Jan 2024 01:26:37 +0530 Subject: [PATCH 2/2] Added Designs to Main Body --- public/index.html | 9 +++++++++ src/components/DataSection.css | 6 ++++++ src/components/main_body.css | 12 ++++++++++-- src/components/main_body.js | 30 ++++++++++++++++-------------- src/components/navbar.css | 1 + 5 files changed, 42 insertions(+), 16 deletions(-) diff --git a/public/index.html b/public/index.html index 3d2d553..1004524 100644 --- a/public/index.html +++ b/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`. --> + + + + + + + + +