├── public
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── robots.txt
    ├── Images
    │   └── estate.jpg
    ├── manifest.json
    └── index.html
├── src
    ├── Assets
    │   ├── BC.png
    │   ├── Eth.png
    │   ├── Logo.png
    │   ├── ipfs.png
    │   ├── media.png
    │   ├── Solidity.png
    │   ├── ReactLogo.png
    │   ├── homepageimg.png
    │   ├── sellimage.png
    │   └── MENU.svg
    ├── index.js
    ├── index.css
    ├── App.js
    ├── Pages
    │   ├── RealEstate.sol
    │   ├── BuyEstate.js
    │   ├── SellEstate.js
    │   ├── Home.js
    │   └── escrow.sol
    ├── Components
    │   ├── Boxes.js
    │   ├── Navbar.js
    │   ├── Cards.js
    │   └── Footer.js
    ├── context
    │   └── ContractContext.js
    ├── services
    │   └── Estates.js
    └── App.css
├── .gitignore
├── package.json
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/Assets/BC.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/src/Assets/BC.png


--------------------------------------------------------------------------------
/src/Assets/Eth.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/src/Assets/Eth.png


--------------------------------------------------------------------------------
/src/Assets/Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/src/Assets/Logo.png


--------------------------------------------------------------------------------
/src/Assets/ipfs.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/src/Assets/ipfs.png


--------------------------------------------------------------------------------
/src/Assets/media.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/src/Assets/media.png


--------------------------------------------------------------------------------
/src/Assets/Solidity.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/src/Assets/Solidity.png


--------------------------------------------------------------------------------
/public/Images/estate.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/public/Images/estate.jpg


--------------------------------------------------------------------------------
/src/Assets/ReactLogo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/src/Assets/ReactLogo.png


--------------------------------------------------------------------------------
/src/Assets/homepageimg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/src/Assets/homepageimg.png


--------------------------------------------------------------------------------
/src/Assets/sellimage.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dainik10/Real-Estate-DApp/HEAD/src/Assets/sellimage.png


--------------------------------------------------------------------------------
/src/Assets/MENU.svg:
--------------------------------------------------------------------------------
1 | <svg width="38" height="33" viewBox="0 0 38 33" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <rect width="38" height="5.4944" rx="2.7472" fill="black"/>
3 | <rect y="13.3926" width="38" height="5.4944" rx="2.7472" fill="black"/>
4 | <rect y="26.7852" width="38" height="5.4944" rx="2.7472" fill="black"/>
5 | </svg>
6 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom/client';
 3 | import './index.css';
 4 | import App from './App';
 5 | 
 6 | import { ContractProvider } from './context/ContractContext';
 7 | 
 8 | const root = ReactDOM.createRoot(document.getElementById('root'));
 9 | root.render(
10 |     <ContractProvider>
11 |         <App />
12 |     </ContractProvider>
13 | );
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   margin: 0;
 3 |   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 4 |     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 5 |     sans-serif;
 6 |   -webkit-font-smoothing: antialiased;
 7 |   -moz-osx-font-smoothing: grayscale;
 8 | }
 9 | 
10 | code {
11 |   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 |     monospace;
13 | }
14 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 2 | import './App.css';
 3 | import Home from './Pages/Home';
 4 | import BuyEstate from './Pages/BuyEstate';
 5 | import SellEstate from './Pages/SellEstate';
 6 | 
 7 | function App() {
 8 |   return (
 9 |     <>
10 |       <Router>
11 |         <Routes>
12 |           <Route exact path='/' element={<Home />} ></Route>
13 |           <Route exact path='/buy' element={<BuyEstate />} ></Route>
14 |           <Route exact path='/sell' element={<SellEstate />} ></Route>
15 |         </Routes>
16 |       </Router>
17 |     </>
18 |   );
19 | }
20 | 
21 | export default App;
22 | 


--------------------------------------------------------------------------------
/src/Pages/RealEstate.sol:
--------------------------------------------------------------------------------
 1 | //SPDX-License-Identifier: Unlicense
 2 | pragma solidity ^0.8.0;
 3 | 
 4 | import "@openzeppelin/contracts/utils/Counters.sol";
 5 | import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
 6 | import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
 7 | 
 8 | contract RealEstate is ERC721URIStorage {
 9 |     using Counters for Counters.Counter;
10 |     Counters.Counter private _tokenIds;
11 | 
12 |     constructor() ERC721("Real Estate", "REAL") {}
13 | 
14 |     function mint(string memory tokenURI) public returns (uint256) {
15 |         _tokenIds.increment();
16 | 
17 |         uint256 newItemId = _tokenIds.current();
18 |         _mint(msg.sender, newItemId);
19 |         _setTokenURI(newItemId, tokenURI);
20 | 
21 |         return newItemId;
22 |     }
23 | 
24 |     function totalSupply() public view returns (uint256) {
25 |         return _tokenIds.current();
26 |     }
27 | }


--------------------------------------------------------------------------------
/src/Components/Boxes.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | const Boxes = () => {
 4 |     return (
 5 |         <>
 6 |             <div className="col mb-lg-4">
 7 |                 <div className="card patta bg-primary">
 8 |                     <div className="card-body">
 9 |                         <div className='mt-4 d-flex justify-content-center'>
10 |                             <div className='cir d-flex align-items-center justify-content-center'>
11 |                                 <i className="fa-solid fa-indian-rupee-sign fs-2 text-light"></i>
12 |                             </div>
13 |                         </div>
14 | 
15 |                         <div className='patta-lik mt-5 text-center'>
16 |                             Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse possimus architecto
17 |                         </div>
18 | 
19 | 
20 |                     </div>
21 |                 </div>
22 |             </div>
23 |         </>
24 |     )
25 | }
26 | 
27 | export default Boxes


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dainu",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.5",
 7 |     "@testing-library/react": "^13.4.0",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "bootstrap": "^5.3.0-alpha2",
10 |     "ethers": "^6.8.0",
11 |     "react": "^18.2.0",
12 |     "react-dom": "^18.2.0",
13 |     "react-router-dom": "^6.10.0",
14 |     "react-scripts": "^5.0.1",
15 |     "web-vitals": "^2.1.4"
16 |   },
17 |   "scripts": {
18 |     "start": "react-scripts start",
19 |     "build": "react-scripts build",
20 |     "test": "react-scripts test",
21 |     "eject": "react-scripts eject"
22 |   },
23 |   "eslintConfig": {
24 |     "extends": [
25 |       "react-app",
26 |       "react-app/jest"
27 |     ]
28 |   },
29 |   "browserslist": {
30 |     "production": [
31 |       ">0.2%",
32 |       "not dead",
33 |       "not op_mini all"
34 |     ],
35 |     "development": [
36 |       "last 1 chrome version",
37 |       "last 1 firefox version",
38 |       "last 1 safari version"
39 |     ]
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/src/Pages/BuyEstate.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Navbar from '../Components/Navbar'
 3 | import Cards from '../Components/Cards'
 4 | import { Link } from 'react-router-dom'
 5 | import Footer from '../Components/Footer'
 6 | 
 7 | const BuyEstate = () => {
 8 |     return (
 9 |         <>
10 |             <Navbar />
11 |             <div className='container mt-lg-5 mt-3'>
12 |                 <div
13 |                     className="row g-0 overflow-hidden flex-md-row mb-5 h-md-250 position-relative w-100 inv">
14 |                     <div className="col mb-2 ps-4 d-flex flex-column position-static">
15 |                         <div className='h1 head'>
16 |                         Buy Properties<br /><Link to='#' className='invest-head-comp'>Without any headache </Link>
17 |                         </div>
18 |                         <div className='h6 sub-head mt-2'>
19 |                             Browse latest Estates
20 |                         </div>
21 |                     </div>
22 |                 </div>
23 | 
24 | 
25 |                 <div className="row row-cols-1 row-cols-sm-2 row-cols-md-2 g-3 ms-lg-5 ms-sm-2">
26 |                     <Cards />
27 |                 </div>
28 | 
29 |             </div>
30 |             <Footer />
31 |         </>
32 |     )
33 | }
34 | 
35 | export default BuyEstate


--------------------------------------------------------------------------------
/src/Pages/SellEstate.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { Link } from 'react-router-dom'
 3 | import Footer from '../Components/Footer'
 4 | import Navbar from '../Components/Navbar'
 5 | import sellimg from '../Assets/sellimage.png'
 6 | 
 7 | const SellEstate = () => {
 8 |   return (
 9 |     <>
10 |       <Navbar />
11 |       <div className='container mt-lg-5 mt-3'>
12 |         <div
13 |           className="row g-0 overflow-hidden flex-md-row mb-5 h-md-250 position-relative w-100 raise">
14 |           <div className="col mb-2 ps-4 d-flex flex-column position-static">
15 |             <div className='h1 head'>Owners sell your<br />Estate<br /><Link to='#' className='raise-head-comp'>With zero paper work<br /></Link>
16 |             </div>
17 |             <div className='h6 sub-head mt-2'>Sell your properties and Estates Online<br />With new and secured technologies(Exceptional-Handlers).
18 |             </div>
19 |           </div>
20 | 
21 |           <div className='col-auto d-lg-block'>
22 |             <img src={sellimg} alt="img" className='raise_img img-fluid' />
23 |           </div>
24 |         </div>
25 | 
26 |         <form>
27 |           <div className='h3'>Exceptional Handlers. We will connect it with the smart contract to connect with third party and sell and purchase the property from the comfort of your zone.</div>
28 |         </form>
29 |       </div>
30 |       <Footer />
31 |     </>
32 |   )
33 | }
34 | 
35 | export default SellEstate


--------------------------------------------------------------------------------
/src/context/ContractContext.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | 
 3 | export const ContractContext = React.createContext();
 4 | 
 5 | const { ethereum } = window
 6 | 
 7 | export const ContractProvider = ({ children }) => {
 8 | 
 9 |     const [account, setAccount] = useState('')
10 | 
11 |     const checkIfWalletIsConnected = async () => {
12 |         try {
13 | 
14 |             if (!ethereum) return alert('Please Install Metamask')
15 | 
16 |             const accounts = await ethereum.request({ method: 'eth_accounts' })
17 |             if (accounts.length) {
18 |                 setAccount(accounts[0])
19 |             }
20 | 
21 |         } catch (error) {
22 |             console.log(error);
23 |         }
24 |     }
25 | 
26 |     const connectWallet = async () => {
27 |         try {
28 | 
29 |             if (!ethereum) return alert('Please Install Metamask')
30 | 
31 |             const accounts = await ethereum.request({ method: 'eth_requestAccounts' })
32 |             if (accounts.length) {
33 |                 setAccount(accounts[0])
34 |             }
35 | 
36 |         } catch (error) {
37 |             console.log(error);
38 |         }
39 |     }
40 | 
41 |     useEffect(() => {
42 |         checkIfWalletIsConnected()
43 |     }, [])
44 |     useEffect(() => {
45 |         if (ethereum) {
46 | 
47 |             const handleAccountsChanged = async (newAccounts) => {
48 |                 if (newAccounts.length > 0) {
49 |                     setAccount(newAccounts[0]);
50 |                 } else {
51 |                     setAccount('');
52 |                 }
53 |             };
54 | 
55 |             ethereum.on('accountsChanged', handleAccountsChanged);
56 | 
57 |             return () => {
58 |                 ethereum.removeListener('accountsChanged', handleAccountsChanged);
59 |             };
60 |         }
61 |     }, [ethereum])
62 | 
63 |     return (
64 |         <ContractProvider value={{ account, connectWallet }}>
65 |             {children}
66 |         </ContractProvider>
67 |     )
68 | }


--------------------------------------------------------------------------------
/src/Components/Navbar.js:
--------------------------------------------------------------------------------
 1 | import React, { useContext } from 'react'
 2 | import menu from '../Assets/MENU.svg'
 3 | import { Link, NavLink } from 'react-router-dom';
 4 | 
 5 | import logo from '../Assets/Logo.png'
 6 | import { ContractContext } from '../context/ContractContext';
 7 | 
 8 | const Navbar = () => {
 9 | 
10 |     const { account, connectWallet } = useContext(ContractContext)
11 | 
12 |     return (
13 |         <div className="container mt-0">
14 |             <nav className="navbar navbar-expand-lg">
15 |                 <div className="container-fluid">
16 |                     <NavLink className="navbar-brand ms-3 mt-2" to="/"><img src={logo} className='logo' alt='' /></NavLink >
17 |                     <div className="collapse navbar-collapse" id="navbarNav">
18 |                         <ul className="navbar-nav">
19 |                             <li className="nav-item mx-4">
20 |                                 <NavLink className="nav-link link px-3" aria-current="page" to="/buy">Buy Property</NavLink >
21 |                             </li>
22 |                             <li className="nav-item mx-4">
23 |                                 <NavLink className="nav-link link px-3" aria-current="page" to="/sell">Sell Property</NavLink >
24 |                             </li>
25 |                             <li className="nav-item mx-4">
26 |                                 <a className="nav-link link px-3" aria-current="page" href="#footer">Contact Us</a >
27 |                             </li>
28 |                             <div className="d-flex">
29 |                                 <button className={account ? `btn btn-outline-primary btn-lg user-select-none` : `btn btn-outline-primary btn-lg`} onClick={account ? e => e.preventDefault() : connectWallet}>{account ? account.slice(0, 5) + '.......' + account.slice(-1) : 'Connect'}</button>
30 |                             </div>
31 |                         </ul>
32 |                     </div>
33 |                     <div className='d-md-none d-lg-none d-block'>
34 |                         <a className="navbar-brand" href="#footer"><img src={menu} className='menu' alt='Shayar' /></a >
35 |                     </div>
36 |                 </div>
37 |             </nav>
38 | 
39 |         </div>
40 |     )
41 | }
42 | 
43 | export default Navbar;


--------------------------------------------------------------------------------
/src/Components/Cards.js:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import Estates from "../services/Estates.js";
 3 | 
 4 | const Cards = () => {
 5 | 
 6 |     const [propertyData, setPropertyData] = useState(Estates)
 7 |     console.log(propertyData);
 8 | 
 9 |     return (
10 |         <>
11 |             {
12 |                 propertyData.map((curElem) => {
13 |                     return (
14 |                         <div className="col mt-5 mb-lg-4" key={curElem.id}>
15 |                             <div className="card shadow-sm inv0">
16 |                                 <img src={curElem.image} className="card-img-top img-fluid" alt='img' />
17 |                                 <div className="card-body">
18 |                                     <div className='d-flex mt-2'>
19 |                                         <div className='inv-name ms-2 pb-5'>
20 |                                             <div className='inv-sec d-flex text-success fw-medium justify-content-center align-items-center mb-3'>{curElem.PName}</div>
21 |                                             <p className='h6 mb-lg-1 mb-sm-3 mt-1 ms-2'>{curElem.OName}</p>
22 |                                         </div>
23 |                                     </div>
24 | 
25 |                                     <div className='text-muted mt-3 ms-2'>
26 |                                         {curElem.Address}
27 |                                     </div>
28 |                                     <div className='text-muted mt-3 ms-2'>
29 |                                         {curElem.Desc}
30 |                                     </div>
31 | 
32 |                                     <div className='inv-divi mt-4'></div>
33 | 
34 |                                     <div className="d-flex justify-content-between mt-4">
35 |                                         <div className='inv-per d-flex justify-content-center align-items-center'>
36 |                                             <p className='text-success fs-5 fw-semibold mb-0 ms-0 mt-0'>{curElem.Price}</p>
37 |                                         </div>
38 |                                         <button className='border border-success-subtle border-2 rounded d-flex align-items-center justify-content-center inv3 fw-semibold buy'>
39 |                                             <i className="fa-regular fa-circle-check me-2"></i> Buy Property
40 |                                         </button>
41 | 
42 |                                     </div>
43 |                                 </div>
44 |                             </div>
45 |                         </div>
46 |                     )
47 | 
48 | 
49 |                 }
50 |                 )
51 |             }
52 | 
53 |         </>
54 |     )
55 | }
56 | 
57 | export default Cards


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 8 |   <meta name="theme-color" content="#000000" />
 9 |   <meta name="description" content="Web site created using create-react-app" />
10 |   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
11 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
12 |   <!--
13 |       manifest.json provides metadata used when your web app is installed on a
14 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
15 |     -->
16 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
17 |   <!--
18 |       Notice the use of %PUBLIC_URL% in the tags above.
19 |       It will be replaced with the URL of the `public` folder during the build.
20 |       Only files inside the `public` folder can be referenced from the HTML.
21 | 
22 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
23 |       work correctly both with client-side routing and a non-root public URL.
24 |       Learn how to configure a non-root public URL by running `npm run build`.
25 |     -->
26 |   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet"
27 |     integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
28 |   <title>Exception-Handlers</title>
29 | </head>
30 | 
31 | <body>
32 |   <noscript>You need to enable JavaScript to run th9s app.</noscript>
33 |   <div id="root"></div>
34 |   <!--
35 |       This HTML file is a template.
36 |       If you open it directly in the browser, you will see an empty page.
37 | 
38 |       You can add webfonts, meta tags, or analytics to this file.
39 |       The build step will place the bundled scripts into the <body> tag.
40 | 
41 |       To begin the development, run `npm start` or `yarn start`.
42 |       To create a production bundle, use `npm run build` or `yarn build`.
43 |     -->
44 | 
45 |   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js"
46 |     integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N"
47 |     crossorigin="anonymous"></script>
48 |     <script src="https://kit.fontawesome.com/8b57623ce0.js" crossorigin="anonymous"></script>
49 |     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.bundle.min.js" integrity="sha384-qKXV1j0HvMUeCBQ+QVp7JcfGl760yU08IQ+GpUo5hlbpg51QRiuqHAJz8+BrxE/N" crossorigin="anonymous"></script>
50 | </body>
51 | 
52 | </html>


--------------------------------------------------------------------------------
/src/Pages/Home.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import Navbar from '../Components/Navbar'
 3 | import Eth from '../Assets/Eth.png'
 4 | import Solidity from '../Assets/Solidity.png'
 5 | import ReactLogo from '../Assets/ReactLogo.png'
 6 | import BC from '../Assets/BC.png'
 7 | import homepageimg from '../Assets/homepageimg.png'
 8 | import Boxes from '../Components/Boxes'
 9 | import { Link } from 'react-router-dom'
10 | import Footer from '../Components/Footer'
11 | 
12 | const Home = () => {
13 |   return (
14 |     <>
15 |       <Navbar />
16 | 
17 |       <div className='mt-lg-5 mt-3 d-flex flex-wrap position-relative'>
18 | 
19 |         <div
20 |           className="container ms-lg-5 ms-2 ps-lg-4 row g-0 overflow-hidden flex-md-row mb-5 h-md-250 position-relative w-100 home">
21 |           <div className="col mb-2 ps-4 d-flex flex-column position-static">
22 |             <div className='h1 head'>Start buying<br />Online Real-Estate<br /> with <Link to='#' className='head-comp'>Crypocurrency</Link>
23 |             </div>
24 |             <div className='h6 sub-head mt-2'>Providing Platform for all kind of buying and selling<br /> of real estate
25 |             </div>
26 |             <div className='mt-3'>
27 |               <Link className='btn btn-primary btn-lg scr-btn' to='/buy'>Buy Now <i className="fa-solid fa-arrow-right"></i></Link>
28 |             </div>
29 |           </div>
30 | 
31 |           <div className='col-auto d-lg-block'>
32 |             <img src={homepageimg} alt="img" className='first_img img-fluid' />
33 |           </div>
34 |         </div>
35 | 
36 | 
37 | 
38 |         {/* MEDIA */}
39 | 
40 |         <div className='container rounded-5 md mt-5 pt-lg-5'>
41 |           <div>
42 |             <p className='text-center h1 div-head'>Technologies</p>
43 |             <p className='text-center sub-head'>Today's new technologies are going to bring revolution in upcoming era</p>
44 |           </div>
45 | 
46 |           <div className='mt-5 py-lg-5 med'>
47 |             <img src={BC} alt="img" className='media-1 mb-3' />
48 |             <img src={Eth} alt="img" className='media mb-3' />
49 |             <img src={ReactLogo} alt="img" className='media-1 mb-3' />
50 |             <img src={Solidity} alt="img" className='media mb-3' />
51 |           </div>
52 |         </div>
53 | 
54 |         {/* BOXES */}
55 |         <div className='container-fluid mt-5'>
56 |           <div className='row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3 py-lg-5 pb-4 ms-sm-2'>
57 | 
58 |             <Boxes />
59 |             <Boxes />
60 |             <Boxes />
61 | 
62 |           </div>
63 |           <div className='d-flex justify-content-center'>
64 |             <Link className='btn btn-primary btn-lg scr-btn px-lg-5'>Connect Wallet</Link>
65 |           </div>
66 |         </div>
67 |       </div>
68 | 
69 |       <Footer />
70 |     </>
71 |   )
72 | }
73 | 
74 | export default Home


--------------------------------------------------------------------------------
/src/services/Estates.js:
--------------------------------------------------------------------------------
 1 | const Company = [
 2 | 
 3 |     {
 4 |         "id": "1",
 5 |         "image": "images/estate.jpg",
 6 |         "PName":"PROPERTY NAME",
 7 |         "OName": "OWNER NAME",
 8 |         "Address": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse",
 9 |         "Desc": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse possimus architecto sint enim placeat blanditiis consectetur autem, voluptatem voluptatibus",
10 |         "Price": "22 Eth"
11 |     },
12 |     {
13 |         "id": "2",
14 |         "image": "images/estate.jpg",
15 |         "PName":"PROPERTY NAME",
16 |         "OName": "OWNER NAME",
17 |         "Address": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse",
18 |         "Desc": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse possimus architecto sint enim placeat blanditiis consectetur autem, voluptatem voluptatibus",
19 |         "Price": "22 Eth"
20 |     },
21 |     {
22 |         "id": "3",
23 |         "image": "images/estate.jpg",
24 |         "PName":"PROPERTY NAME",
25 |         "OName": "OWNER NAME",
26 |         "Address": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse",
27 |         "Desc": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse possimus architecto sint enim placeat blanditiis consectetur autem, voluptatem voluptatibus",
28 |         "Price": "22 Eth"
29 |     },
30 |     {
31 |         "id": "4",
32 |         "image": "images/estate.jpg",
33 |         "PName":"PROPERTY NAME",
34 |         "OName": "OWNER NAME",
35 |         "Address": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse",
36 |         "Desc": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse possimus architecto sint enim placeat blanditiis consectetur autem, voluptatem voluptatibus",
37 |         "Price": "22 Eth"
38 |     },
39 |     {
40 |         "id": "5",
41 |         "image": "images/estate.jpg",
42 |         "PName":"PROPERTY NAME",
43 |         "OName": "OWNER NAME",
44 |         "Address": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse",
45 |         "Desc": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse possimus architecto sint enim placeat blanditiis consectetur autem, voluptatem voluptatibus",
46 |         "Price": "22 Eth"
47 |     },
48 |     {
49 |         "id": "6",
50 |         "image": "images/estate.jpg",
51 |         "PName":"PROPERTY NAME",
52 |         "OName": "OWNER NAME",
53 |         "Address": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse",
54 |         "Desc": "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio natus esse possimus architecto sint enim placeat blanditiis consectetur autem, voluptatem voluptatibus",
55 |         "Price": "22 Eth"
56 |     }
57 | 
58 | ]
59 | 
60 | export default Company;


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Real-Estate-DApp
 2 | 
 3 | # Getting Started with Create React App
 4 | 
 5 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 6 | 
 7 | ## Available Scripts
 8 | 
 9 | In the project directory, you can run:
10 | 
11 | ### `npm start`
12 | 
13 | Runs the app in the development mode.\
14 | Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
15 | 
16 | The page will reload when you make changes.\
17 | You may also see any lint errors in the console.
18 | 
19 | ### `npm test`
20 | 
21 | Launches the test runner in the interactive watch mode.\
22 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
23 | 
24 | ### `npm run build`
25 | 
26 | Builds the app for production to the `build` folder.\
27 | It correctly bundles React in production mode and optimizes the build for the best performance.
28 | 
29 | The build is minified and the filenames include the hashes.\
30 | Your app is ready to be deployed!
31 | 
32 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
33 | 
34 | ### `npm run eject`
35 | 
36 | **Note: this is a one-way operation. Once you `eject`, you can't go back!**
37 | 
38 | If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
39 | 
40 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
41 | 
42 | You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
43 | 
44 | ## Learn More
45 | 
46 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
47 | 
48 | To learn React, check out the [React documentation](https://reactjs.org/).
49 | 
50 | ### Code Splitting
51 | 
52 | This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
53 | 
54 | ### Analyzing the Bundle Size
55 | 
56 | This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
57 | 
58 | ### Making a Progressive Web App
59 | 
60 | This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
61 | 
62 | ### Advanced Configuration
63 | 
64 | This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
65 | 
66 | ### Deployment
67 | 
68 | This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
69 | 
70 | ### `npm run build` fails to minify
71 | 
72 | This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
73 | 


--------------------------------------------------------------------------------
/src/Pages/escrow.sol:
--------------------------------------------------------------------------------
  1 | //SPDX-License-Identifier: Unlicense
  2 | pragma solidity ^0.8.0;
  3 | 
  4 | interface IERC721 {
  5 |     function transferFrom(
  6 |         address _from,
  7 |         address _to,
  8 |         uint256 _id
  9 |     ) external;
 10 | }
 11 | 
 12 | contract Escrow {
 13 |     address public nftAddress;
 14 |     address payable public seller;
 15 |     address public inspector;
 16 |     address public lender;
 17 | 
 18 |     modifier onlyBuyer(uint256 _nftID) {
 19 |         require(msg.sender == buyer[_nftID], "Only buyer can call this method");
 20 |         _;
 21 |     }
 22 | 
 23 |     modifier onlySeller() {
 24 |         require(msg.sender == seller, "Only seller can call this method");
 25 |         _;
 26 |     }
 27 | 
 28 |     modifier onlyInspector() {
 29 |         require(msg.sender == inspector, "Only inspector can call this method");
 30 |         _;
 31 |     }
 32 | 
 33 |     mapping(uint256 => bool) public isListed;
 34 |     mapping(uint256 => uint256) public purchasePrice;
 35 |     mapping(uint256 => uint256) public escrowAmount;
 36 |     mapping(uint256 => address) public buyer;
 37 |     mapping(uint256 => bool) public inspectionPassed;
 38 |     mapping(uint256 => mapping(address => bool)) public approval;
 39 | 
 40 |     constructor(
 41 |         address _nftAddress,
 42 |         address payable _seller,
 43 |         address _inspector,
 44 |         address _lender
 45 |     ) {
 46 |         nftAddress = _nftAddress;
 47 |         seller = _seller;
 48 |         inspector = _inspector;
 49 |         lender = _lender;
 50 |     }
 51 | 
 52 |     function list(
 53 |         uint256 _nftID,
 54 |         address _buyer,
 55 |         uint256 _purchasePrice,
 56 |         uint256 _escrowAmount
 57 |     ) public payable onlySeller {
 58 |         // Transfer NFT from seller to this contract
 59 |         IERC721(nftAddress).transferFrom(msg.sender, address(this), _nftID);
 60 | 
 61 |         isListed[_nftID] = true;
 62 |         purchasePrice[_nftID] = _purchasePrice;
 63 |         escrowAmount[_nftID] = _escrowAmount;
 64 |         buyer[_nftID] = _buyer;
 65 |     }
 66 | 
 67 |     // Put Under Contract (only buyer - payable escrow)
 68 |     function depositEarnest(uint256 _nftID) public payable onlyBuyer(_nftID) {
 69 |         require(msg.value >= escrowAmount[_nftID]);
 70 |     }
 71 | 
 72 |     // Update Inspection Status (only inspector)
 73 |     function updateInspectionStatus(uint256 _nftID, bool _passed)
 74 |         public
 75 |         onlyInspector
 76 |     {
 77 |         inspectionPassed[_nftID] = _passed;
 78 |     }
 79 | 
 80 |     // Approve Sale
 81 |     function approveSale(uint256 _nftID) public {
 82 |         approval[_nftID][msg.sender] = true;
 83 |     }
 84 | 
 85 |     // Finalize Sale
 86 |     // -> Require inspection status (add more items here, like appraisal)
 87 |     // -> Require sale to be authorized
 88 |     // -> Require funds to be correct amount
 89 |     // -> Transfer NFT to buyer
 90 |     // -> Transfer Funds to Seller
 91 |     function finalizeSale(uint256 _nftID) public {
 92 |         require(inspectionPassed[_nftID]);
 93 |         require(approval[_nftID][buyer[_nftID]]);
 94 |         require(approval[_nftID][seller]);
 95 |         require(approval[_nftID][lender]);
 96 |         require(address(this).balance >= purchasePrice[_nftID]);
 97 | 
 98 |         isListed[_nftID] = false;
 99 | 
100 |         (bool success, ) = payable(seller).call{value: address(this).balance}(
101 |             ""
102 |         );
103 |         require(success);
104 | 
105 |         IERC721(nftAddress).transferFrom(address(this), buyer[_nftID], _nftID);
106 |     }
107 | 
108 |     // Cancel Sale (handle earnest deposit)
109 |     // -> if inspection status is not approved, then refund, otherwise send to seller
110 |     function cancelSale(uint256 _nftID) public {
111 |         if (inspectionPassed[_nftID] == false) {
112 |             payable(buyer[_nftID]).transfer(address(this).balance);
113 |         } else {
114 |             payable(seller).transfer(address(this).balance);
115 |         }
116 |     }
117 | 
118 |     receive() external payable {}
119 | 
120 |     function getBalance() public view returns (uint256) {
121 |         return address(this).balance;
122 |     }
123 | }


--------------------------------------------------------------------------------
/src/Components/Footer.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { NavLink } from 'react-router-dom'
 3 | import logo from '../Assets/Logo.png'
 4 | const Footer = () => {
 5 |     return (
 6 |         <div className="container-fluid foot" id='footer'>
 7 | 
 8 |             <div className="container">
 9 |                 <footer className="d-flex flex-column py-2 my-5 position-relative">
10 | 
11 |                     <div className='d-flex mb-4 f0'>
12 | 
13 |                         <div className="my-3">
14 |                             <NavLink className='ms-4' to="/">
15 |                                 <img src={logo} className='logo' alt='' />
16 |                             </NavLink>
17 |                             <p className="text-muted ms-4 lh-lg foot-contact mt-2">CodeWarriors © 2022<br />All Rights Reserved</p>
18 | 
19 |                         </div>
20 | 
21 |                         <div className='d-flex mt-4 f1'>
22 | 
23 |                             <div className="mb-3 mx-5">
24 |                                 <h5 className='h5 foot-head mt-2'>Buyers</h5>
25 |                                 <ul className="nav flex-column mt-3">
26 |                                     <li className="nav-item mb-2">
27 |                                         <NavLink className="nav-link foot-link p-0 text-muted" to="/buy">Buy</NavLink >
28 |                                     </li>
29 |                                 </ul>
30 |                             </div>
31 | 
32 |                             <div className="mb-3 mx-5">
33 |                                 <h5 className='h5 foot-head mt-2'>Owners</h5>
34 |                                 <ul className="nav flex-column mt-3">
35 |                                     <li className="nav-item mb-2">
36 |                                         <NavLink className="nav-link foot-link p-0 text-muted" to="/sell">Sell</NavLink >
37 |                                     </li>
38 |                                 </ul>
39 |                             </div>
40 | 
41 |                             <div className="mb-3 ms-5 f2">
42 |                                 <h5 className='h5 foot-head mt-2'>Get In Touch</h5>
43 |                                 <p className='text-muted mt-3 lh-lg f2-txt'>Ouestions or Feedback<br />Ask Us Anything</p>
44 |                                 <ul className="nav flex-row text-sm-center text-lg-left f2-icons">
45 |                                     <li className="nav-item mb-2 me-2">
46 |                                         <a className="ext-link" href="https://www.google.com/" target="_blank" rel='noreferrer'><i className="fa-brands fa-linkedin"></i></a >
47 |                                     </li>
48 |                                     <li className="nav-item mb-2 mx-2">
49 |                                         <a className="ext-link" href="https://www.google.com/" target="_blank" rel='noreferrer'><i className="fa-brands fa-facebook"></i></a >
50 |                                     </li>
51 |                                     <li className="nav-item mb-2 mx-2">
52 |                                         <a className="ext-link" href="https://www.google.com/" target="_blank" rel='noreferrer'><i className="fa-brands fa-square-instagram"></i></a >
53 |                                     </li>
54 |                                     <li className="nav-item mb-2 ms-2">
55 |                                         <a className="ext-link" href="https://www.google.com/" target="_blank" rel='noreferrer'><i className="fa-solid fa-square-arrow-up-right"></i></a >
56 |                                     </li>
57 |                                 </ul>
58 |                             </div>
59 |                         </div>
60 |                     </div>
61 | 
62 |                     <div className='border-top border-dark-subtle py-5'>
63 |                         <p className='text-muted ms-4'>CodeWarriors are providing an online platform for purchase and sell of Real-Estate through Dapp. This Dapp will provide an easy and quick way to buy and sell Real-Estate which is a real headache in todays world, this will surely make people's life easy as well as secured as we are using Web 3.0 which is completely trusted because it is working on Ethereum blockchain and everything is secured by solidity Smart Contract.</p>
64 |                         <p className='text-muted ms-4'>
65 |                             Let's bring the revolution together.
66 |                         </p>
67 | 
68 |                     </div>
69 | 
70 | 
71 |                 </footer>
72 |             </div>
73 |         </div>
74 |     )
75 | }
76 | 
77 | export default Footer


--------------------------------------------------------------------------------
/src/App.css:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  2 | 
  3 | body {
  4 |   font-family: 'Poppins', sans-serif;
  5 |   overflow-x: hidden;
  6 |   /* position: relative; */
  7 | }
  8 | 
  9 | .logo {
 10 |   width: 5vw;
 11 |   height: 10vh;
 12 | }
 13 | .container{
 14 |   color: #000000;
 15 | }
 16 | 
 17 | 
 18 | .menu {
 19 |   position: absolute;
 20 |   right: 3vw;
 21 |   top: 5.8vh;
 22 |   width: 10vw;
 23 |   height: 3vh;
 24 | }
 25 | 
 26 | .media {
 27 |   width: 12.59vw;
 28 |   height: 14.9vh;
 29 | }
 30 | 
 31 | .media-1 {
 32 |   width: 8.59vw;
 33 |   height: 14.9vh;
 34 | }
 35 | 
 36 | .scr-btn {
 37 |   padding: 2.2vh 5vh;
 38 |   font-weight: 500;
 39 |   font-size: 18px;
 40 |   line-height: 23px;
 41 | }
 42 | 
 43 | .sc-btn {
 44 |   padding: 2.2vh 5vh;
 45 |   font-weight: 500;
 46 |   font-size: 18px;
 47 |   line-height: 23px;
 48 | }
 49 | 
 50 | .sc-btn-2 {
 51 |   padding: 1vh 4.5vh;
 52 |   font-weight: 400;
 53 |   font-size: 12px;
 54 |   line-height: 23px;
 55 |   letter-spacing: 0.5px;
 56 |   color: #4c4c4c;
 57 | }
 58 | 
 59 | 
 60 | /* NAVBAR */
 61 | .navbar {
 62 |   height: 18vh;
 63 | }
 64 | 
 65 | 
 66 | .navbar-nav {
 67 |   position: absolute;
 68 |   right: 0;
 69 | }
 70 | 
 71 | .link {
 72 |   font-weight: 500;
 73 |   font-size: 20px;
 74 |   line-height: 23px;
 75 |   color: #000000;
 76 |   /* border: 2px solid white; */
 77 |   border-radius: 20px;
 78 | }
 79 | 
 80 | .link:hover {
 81 |   background-color: #000000;
 82 |   color: white;
 83 |   transition: all 0.5s ease-out;
 84 | }
 85 | 
 86 | #login {
 87 |   padding: 1.5vh 4vh;
 88 |   border-radius: 7px;
 89 |   font-weight: 500;
 90 |   font-size: 18px;
 91 |   line-height: 23px;
 92 | }
 93 | 
 94 | #signup {
 95 |   padding: 1.5vh 4vh;
 96 |   border-radius: 7px;
 97 |   font-weight: 500;
 98 |   font-size: 18px;
 99 |   line-height: 23px;
100 | }
101 | 
102 | /* SIGN UP */
103 | .signup-img {
104 |   width: 36vw;
105 |   height: 78vh;
106 | }
107 | 
108 | .sign-head {
109 |   font-weight: 600;
110 | }
111 | 
112 | .lbl {
113 |   font-weight: 400;
114 |   font-size: 17px;
115 |   line-height: 32px;
116 |   color: #8A8A8A;
117 | }
118 | 
119 | /* INVEST */
120 | .invest-head-comp {
121 |   background: linear-gradient(90deg, #303030 -13.55%, #2a33ff 93.18%);
122 |   -webkit-background-clip: text;
123 |   -webkit-text-fill-color: transparent;
124 |   background-clip: text;
125 |   text-fill-color: transparent;
126 |   cursor: default;
127 | }
128 | 
129 | /* LOGIN */
130 | .login-img {
131 |   width: 44vw;
132 |   height: 60vh;
133 | }
134 | 
135 | /* HOME */
136 | .head {
137 |   font-family: 'Poppins';
138 |   font-style: normal;
139 |   font-weight: 500;
140 |   font-size: 50px;
141 |   line-height: 60px;
142 | }
143 | 
144 | .head-comp {
145 |   cursor: default;
146 |   font-weight: 600;
147 |   background: linear-gradient(174.44deg, #3D4094 67.85%, #853592 79.97%);
148 |   -webkit-background-clip: text;
149 |   -webkit-text-fill-color: transparent;
150 |   background-clip: text;
151 |   text-fill-color: transparent;
152 | 
153 | }
154 | 
155 | .sub-head {
156 |   font-family: 'Poppins';
157 |   font-style: normal;
158 |   font-weight: 400;
159 |   font-size: 18px;
160 |   line-height: 23px;
161 |   color: #B1B1B1;
162 | }
163 | 
164 | 
165 | .sub {
166 |   font-family: 'Poppins';
167 |   font-style: normal;
168 |   font-weight: 300;
169 |   font-size: 15px;
170 |   line-height: 22px;
171 |   letter-spacing: 0.08em;
172 | 
173 |   color: #8A8A8A;
174 | }
175 | 
176 | .login-link {
177 |   text-decoration: none;
178 |   color: blue;
179 | }
180 | 
181 | .first_img {
182 |   position: absolute;
183 |   right: 7vw;
184 |   top: 3vh;
185 | }
186 | 
187 | .div-head {
188 |   font-family: 'Poppins';
189 |   font-style: normal;
190 |   font-weight: 500;
191 |   font-size: 43px;
192 |   line-height: 50px;
193 | }
194 | 
195 | .md {
196 |   background: rgb(113 113 113 / 5%);
197 | }
198 | 
199 | .med {
200 |   display: flex;
201 |   justify-content: space-around;
202 | }
203 | 
204 | .patta {
205 |   width: 30vw;
206 |   height: 53vh;
207 |   cursor: pointer;
208 |   box-shadow: 7px 5px 8px rgba(0, 0, 0, 0.5);
209 |   border-radius: 1rem;
210 |   border: none;
211 |   cursor: pointer;
212 | }
213 | 
214 | .cir {
215 |   border-radius: 10rem;
216 |   width: 7vw;
217 |   height: 14vh;
218 |   background-color: #ebe609;
219 | }
220 | 
221 | .patta-lik {
222 |   color: white;
223 | }
224 | 
225 | 
226 | /* INVEST */
227 | 
228 | .inv0 {
229 |   width: 30vw;
230 |   /* height: 101vh; */
231 |   cursor: pointer;
232 |   background-color: #fafffe;
233 | }
234 | 
235 | .inv0:hover {
236 |   background-color: #0000000f;
237 | }
238 | 
239 | .inv1 {
240 |   width: 5.5vw;
241 |   height: 11vh;
242 | }
243 | 
244 | .inv-name {
245 |   height: 10vh;
246 | }
247 | 
248 | .inv-sec {
249 |   background: rgba(140, 255, 152, 0.68);
250 |   border-radius: 6px;
251 |   width: 13vw;
252 |   height: 5.5vh;
253 |   font-size: 16px;
254 | }
255 | 
256 | .inv-divi {
257 |   height: 1.6vh;
258 |   background: linear-gradient(90deg, #00D8FF 0%, #4200FF 97.99%);
259 |   border-radius: 27px;
260 | }
261 | 
262 | .inv-per {
263 |   background: rgba(140, 255, 152, 0.68);
264 |   border-radius: 6px;
265 |   width: 9vw;
266 |   height: 9vh;
267 |   font-size: 18px;
268 | }
269 | 
270 | .inv2 {
271 |   margin-top: -7px;
272 | }
273 | 
274 | .inv3 {
275 |   width: 17.9vw;
276 | }
277 | 
278 | .buy {
279 |   color: green
280 | }
281 | 
282 | .buy:hover {
283 |   color: white;
284 |   background-color: green;
285 | }
286 | 
287 | /* RAISE */
288 | .raise-head-comp {
289 |   background: linear-gradient(90deg, #00FFFF -13.55%, #000AFF 93.18%);
290 |   -webkit-background-clip: text;
291 |   -webkit-text-fill-color: transparent;
292 |   background-clip: text;
293 |   text-fill-color: blue;
294 |   cursor: default;
295 | }
296 | 
297 | .raise_img {
298 |   width: 35vw;
299 |   height: 35vh;
300 |   position: absolute;
301 |   right: 2vw;
302 |   top: 2vh;
303 | }
304 | 
305 | .raise-cards {
306 |   width: 100%;
307 | }
308 | 
309 | /* FOOTER */
310 | .foot {
311 |   background: rgba(118, 123, 255, 0.11);
312 |   height: 75vh;
313 | }
314 | 
315 | .f1 {
316 |   position: absolute;
317 |   right: 0;
318 | }
319 | 
320 | .foot-head {
321 |   font-weight: 500;
322 |   font-size: 20px;
323 |   line-height: 23px;
324 |   color: #161616;
325 | }
326 | 
327 | .foot-link {
328 |   font-weight: 400;
329 |   font-size: 17px;
330 |   line-height: 30px;
331 |   /* letter-spacing: 0.04em; */
332 |   color: #424242;
333 | }
334 | 
335 | .ext-link {
336 |   color: #424242;
337 |   font-size: 1.3rem;
338 | }
339 | 
340 | .ext-link:hover {
341 |   color: #000000;
342 | }
343 | 
344 | .foot-sub {
345 |   font-family: 'Poppins';
346 |   font-style: normal;
347 |   font-weight: 400;
348 |   font-size: 15px;
349 |   line-height: 26px;
350 |   /* color: #424242; */
351 |   color: #8A8A8A;
352 | }
353 | 
354 | .foot-contact {
355 |   font-weight: 600;
356 | }
357 | 
358 | .foot-cnt {
359 |   color: #686868;
360 |   font-size: 15px;
361 |   font-weight: 400;
362 | }
363 | 
364 | .foot-cnt:hover {
365 |   cursor: pointer;
366 |   color: #000000;
367 |   font-size: 15px;
368 |   font-weight: 500;
369 | }
370 | 
371 | /* SUCCESS */
372 | .success {
373 |   height: 80vh;
374 | }
375 | 
376 | 
377 | 
378 | /* RESPONSIVENESS */
379 | 
380 | @media only screen and (max-width: 600px) {
381 |   .head {
382 |     font-size: 40px;
383 |     line-height: 50px;
384 |   }
385 | 
386 |   .sub-head {
387 |     font-size: 15px;
388 |     line-height: 20px;
389 |   }
390 | 
391 |   .sub {
392 |     font-size: 14px;
393 |     line-height: 0px;
394 |   }
395 | 
396 |   .navbar {
397 |     height: 11vh;
398 |   }
399 | 
400 |   .logo {
401 |     width: 25.59vw;
402 |     height: 11.9vh;
403 |   }
404 | 
405 |   .scr-btn {
406 |     padding: 1.2vh 3vh;
407 |   }
408 | 
409 |   .home {
410 |     height: 90vh;
411 |   }
412 | 
413 |   .raise {
414 |     height: 49vh;
415 |   }
416 | 
417 |   .first_img {
418 |     width: 88vw;
419 |     height: 35vh;
420 |     position: absolute;
421 |     right: 6.5vw;
422 |     top: 73vh;
423 |   }
424 | 
425 |   .raise_img {
426 |     width: 88vw;
427 |     height: 30vh;
428 |     position: absolute;
429 |     right: 6vw;
430 |     top: 50vh;
431 | 
432 |   }
433 | 
434 |   .raise-cards {
435 |     width: 90%;
436 |     margin-left: 2.4vh;
437 |     text-align: center;
438 |   }
439 | 
440 |   .login {
441 |     margin-left: 0vw;
442 |   }
443 | 
444 |   .sign-head {
445 |     text-align: center;
446 |   }
447 | 
448 |   .sc-btn {
449 |     padding: 1vh 5vh;
450 |   }
451 | 
452 |   .sc-btn-2 {
453 |     padding: 0.5vh 4.5vh;
454 |     font-size: 7px;
455 |   }
456 | 
457 |   .foot {
458 |     height: 150vh;
459 |   }
460 | 
461 |   .f0 {
462 |     flex-direction: column;
463 |   }
464 | 
465 |   .f1 {
466 |     flex-direction: column;
467 |     position: static;
468 |     text-align: center;
469 |   }
470 | 
471 |   .f2 {
472 |     margin-right: 10vw;
473 |   }
474 | 
475 |   .f2-txt {
476 |     margin-left: 2vw;
477 |   }
478 | 
479 |   .f2-icons {
480 |     margin-left: 19vw;
481 |   }
482 | 
483 |   .inv {
484 |     height: 14vh;
485 |   }
486 | 
487 |   .inv0 {
488 |     width: 94.5vw;
489 |     height: 79vh;
490 |   }
491 | 
492 |   .inv1 {
493 |     width: 22vw;
494 |     height: 9vh;
495 |   }
496 | 
497 |   .inv3 {
498 |     width: 54.9vw;
499 |     font-size: .8rem;
500 |   }
501 | 
502 |   .inv-sec {
503 |     width: 40vw;
504 |     height: 4vh;
505 |     font-size: 13px;
506 |   }
507 | 
508 |   .inv-divi {
509 |     height: 0.8vh;
510 |   }
511 | 
512 |   .inv-per {
513 |     width: 29vw;
514 |     height: 7vh;
515 |   }
516 | 
517 |   .media {
518 |     width: 25.59vw;
519 |     height: 4.9vh;
520 |   }
521 | 
522 |   .div-head {
523 |     font-size: 35px;
524 |     line-height: 35px;
525 |   }
526 | 
527 |   .med {
528 |     display: flex;
529 |     justify-content: center;
530 |     align-items: center;
531 |     flex-direction: column;
532 |   }
533 | 
534 |   .patta {
535 |     width: 93vw;
536 |     height: 38vh;
537 |   }
538 | 
539 |   .cir {
540 |     width: 21vw;
541 |     height: 10vh;
542 |   }
543 | 
544 |   .success {
545 |     height: 55vh;
546 |   }
547 | 
548 |   .success .h3 {
549 |     font-size: larger;
550 |   }
551 | }


--------------------------------------------------------------------------------