Landing Page added

package.json

@@ -11,6 +11,8 @@
     "react-dom": "^18.2.0",
     "react-qr-reader": "^3.0.0-beta-1",
     "react-scripts": "5.0.1",
+    "sass": "^1.66.1",
+    "sass-loader": "^13.3.2",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,9 +1,12 @@
-import RegistrationForm from "./components/registrationform/RegistrationForm";
-
+import Navbar from "./components/Navbar/Navbar";
+import Home from "./components/Home/Home";
+import Facilities from "./components/Facilities/Facilities";
 function App() {
   return (
     <div>
-      <RegistrationForm/>
+      <Navbar/>
+      <Home/>
+      <Facilities/>
     </div>
   );
 }

src/components/Facilities/Card.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import styles from './Card.module.scss'
+function Card(props) {
+  return (
+    <div className={styles.card}>
+      <img src={props.details.src} alt="icon"/>
+      <p className={styles.title}>{props.details.title}</p>
+      <p className={styles.description}>{props.details.description}</p>
+    </div>
+  )
+}
+
+export default Card

src/components/Facilities/Card.module.scss

@@ -0,0 +1,31 @@
+.card{
+    border: 0px solid rgba(124, 122, 122, 0.664);
+    min-width: 200px;
+    margin: 2rem;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    margin-top: -2rem;
+    background-color: #D3D3D3;
+
+    z-index: 2;
+    img{
+
+    }
+    .title{
+        font-size: 1.5rem;
+    }
+    .description{
+
+    }
+    transition: .5s;
+}
+.card:hover{
+    cursor: pointer;
+    background-color: rgb(40, 140, 240);
+    color: #FFFF;
+    scale: 1.1;
+}

src/components/Facilities/Facilities.js

@@ -0,0 +1,21 @@
+import React from 'react'
+import styles from './Facilities.module.scss'
+import Card from './Card'
+import icon from '../../assets/call.svg'
+function Facilities() {
+    const cardDetails = 
+        {src: icon,
+        title: "Scan QR",
+        description:"Get details of patient by scanning QR Code"
+        }
+
+  return (
+    <div className={styles.cardContainer}>
+        <Card details={cardDetails}/>
+        <Card details={cardDetails}/>
+        <Card details={cardDetails}/>
+    </div>
+  )
+}
+
+export default Facilities

src/components/Facilities/Facilities.module.scss

@@ -0,0 +1,12 @@
+.cardContainer{
+    display: grid;
+
+   row-gap: 10vw;
+    grid-template-columns: repeat(3, 1fr);
+    @media screen and (max-width:970px) {
+        grid-template-columns: repeat(2, 1fr);
+    }
+    @media screen and (max-width:662px) {
+        grid-template-columns: repeat(1, 1fr);
+    }
+}

src/components/Home/Home.js

@@ -0,0 +1,20 @@
+import React from "react";
+import styles from "./Home.module.scss";
+function Home() {
+  return (
+    <div className={styles.Home}>
+     <div className={styles.description}>
+     <p className={styles.title}>We are national Leaders in medicine</p>
+      <p>
+        Lorem Ipsum is simply dummy text of the printing and typesetting
+        industry. Lorem Ipsum has been the industry's standard dummy text ever
+        since the 1500s, when an unknown printer took a galley of type and
+        scrambled it to make a type specimen book.
+      </p>
+      <button>Make Appointment</button>
+     </div>
+    </div>
+  );
+}
+
+export default Home;

src/components/Home/Home.module.scss

@@ -0,0 +1,35 @@
+.Home{
+    height: fit-content;
+    min-width: 350px;
+    min-height: 100vh;
+    background-image: url('../../assets/background_home4.jpeg');
+    background-repeat: no-repeat;
+    background-size:cover;
+    width: 100%;
+    .description{
+        color: black;
+        width: 30vw;
+        min-width: 300px;
+        margin: 0% 10vw;
+        padding-top:10rem;
+        .title{
+            font-size: 3rem;
+            font-weight: 600;
+        }
+        button{
+            background-color: rgb(12, 128, 243);
+            border: none;
+            padding: 1rem 2rem;
+            font-size: 1rem;
+            font-family: 'Jost';
+            font-weight: 500;
+            border-radius: 2px;
+            letter-spacing: .06rem;
+            color: white;
+            margin: 3rem 0rem;
+        }
+        button:hover{
+            cursor: pointer;
+        }
+    }
+}

src/components/Navbar/Navbar.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import styles from './Navbar.module.scss'
+function Navbar() {
+  return (
+    <div className={styles.navbar}>
+    <ul>
+        <li>Home</li>
+        <li>Clinics</li>
+        <li>Online Appointment</li>
+        <li>Online Appointment</li>
+        <li>Online Appointment</li>
+    </ul>
+ </div>
+  )
+}
+
+export default Navbar

src/components/Navbar/Navbar.module.scss

@@ -0,0 +1,36 @@
+.navbar{
+    background-color: #ffff;
+     ul {
+         list-style: none;
+         display: flex;
+         justify-content:flex-end;
+         word-break: keep-all;    
+         li{
+             margin: 0rem 2rem;
+             padding: .5rem 0rem;
+             color: black;
+             transition: .3s;
+             cursor: pointer;
+             font-family:sans-serif, 'Jost';
+             font-weight: 500;
+             letter-spacing: .05em;
+
+        }
+        li:after {
+         content: '';
+         display: block;
+         margin: auto;
+         margin-top: 5px;
+         height: 1.5px;
+         cursor: pointer;
+         width: 0px;
+         background: transparent;
+         transition: width .5s ease, background-color .5s ease;
+       }
+       li:hover:after {
+         width: 100%;
+         background: #2371ee;
+         cursor: pointer;
+       }
+     }
+ }

src/components/registrationform/RegistrationForm.js

@@ -7,13 +7,12 @@ function RegistrationForm() {
     const [patientDetails,setPatientDetails] = useState({firstName:'',lastName:'',phone:'',alternate:'',address:''});
     const [qrUrl,setUrl] = useState("");
     const [data,setData] = useState('');
+    const [readqrValue, setQrRead] = useState(false);
     const handleChange=(e)=>{
         setPatientDetails({...patientDetails,[e.target.name]:e.target.value});
       };
     const generateQrCode= async (e)=>{
         e.preventDefault();
-        //const BaseUrl = "https://chart.googleapis.com/chart?cht=qr&chs=200x200&chl="+"firstName:" + patientDetails.firstName+"lastName:"+patientDetails.lastName+"phone:"+patientDetails.phone+"alternte:"+patientDetails.alternate+"address:"+patientDetails.address;
-
         console.log(patientDetails)
         try{
           const data =patientDetails.firstName+"&"+patientDetails.lastName+"&"+patientDetails.phone+"&"+patientDetails.alternate+"&"+patientDetails.address;
@@ -32,6 +31,9 @@ function RegistrationForm() {
     }   
     const handleQrScanError=(err)=>{
       console.log(err);
+    }
+    const readqr =()=>{
+      setQrRead(!true);
     }
      return (
       <div>
@@ -107,13 +109,16 @@ function RegistrationForm() {
               <div className={styles.button}>
                 <button type="submit">Generate QR Code</button>
               </div>
+              <div className={styles.button}>
+                <button onClick={readqr}>Read QR Code</button>
+              </div>
             </form>
             <div>
               {qrUrl&&<a href={qrUrl} download={true}>
                 <img src={qrUrl}/>
                 </a>}
                 </div>
-                <QrReader
+               { readqrValue && <QrReader
           delay={300}
 
           onError={handleQrScanError}
@@ -122,6 +127,7 @@ function RegistrationForm() {
 handleQrScan(result);
           }}  
           />
+        }
           <p>{data}</p>
           </div>
 

src/components/registrationform/RegistrationForm.module.scss

@@ -121,7 +121,7 @@
           display: flex;
           button {
             padding: 1rem 5rem;
-
+            margin-top: 1rem;
             justify-content: center;
             align-items: center;
             border-radius: 25px;