....

client/src/components/Farmer/FDashboard.jsx

@@ -3,17 +3,18 @@ import { useState, useEffect } from 'react';
 import { collection, getDocs } from 'firebase/firestore';
 import { db } from '../../../firebase';  // Import your firebase configuration
 import Navbar from './FarmNav';
-
+import { useAuth } from '../context/auth_context';
+import { useNavigate } from 'react-router-dom';
 
 
 
 function Box({ data, showSecondaryBox }) {
   return (
     <div className={styles['box-primary']}>
       <div className={styles['primary-details']}>
-        <p>Name: {data.profile?.displayName || 'N/A'} {data.profile?.lname || ''}</p>
-        <p>Contact Name: {data.displayName || 'N/A'} </p>
+        <p>{data.profile?.displayName || 'N/A'} {data.profile?.lname || ''}</p>
         <p>Phone: {data.profile?.phone || 'N/A'}</p>
+        <p className={styles.emu}>Email : {data.profile?.email || 'N/A'}</p>
         <p>State: {data.address?.state || 'N/A'}</p>
       </div>
       <div className={styles['primary-btn']}>
@@ -25,6 +26,10 @@ function Box({ data, showSecondaryBox }) {
 
 
 function Secondarybox({ data, hideSecondaryBox }) {
+
+  const {currentUser} = useAuth();
+  const navigate = useNavigate();
+
   return (
     <div className={styles['box-sec']}>
       <h3>Details:</h3>
@@ -46,7 +51,7 @@ function Secondarybox({ data, hideSecondaryBox }) {
         <p>Bank: {data.bank?.bank_name || 'N/A'}</p>
 
         <div className={styles.contractBtn}>
-          <button>Make a Deal</button>
+          <button onClick={() => navigate('/chat', { state: { uid: data.profile?.uid, userType: 'farmer' } })}>Negotiate</button>
         </div>
       </div>
     </div>
@@ -173,11 +178,11 @@ function FDashboard() {
   const [searchQuery,setSearchQuery] = useState('');
 
   return (
-    <>
+    <div className={styles.dashbody}>
       <Navbar />
       <Search handleSearch={(e) => setSearchQuery(e.target.value)} />
       <MainBox searchQuery={searchQuery} />
-    </>
+    </div>
   );
 }
 

client/src/components/Farmer/FDashboard.module.css

@@ -8,6 +8,9 @@
 body {
   /* overflow-x: hidden; */
 }
+.dashbody{
+  background-color: white;
+}
 .headerfd {
   height: 17vh;
   background-color: green;
@@ -110,6 +113,7 @@ body {
   justify-content: center;
   gap: 250px;
   border: 0.5px solid rgb(159, 159, 159);
+  background-color: white;
 }
 .search-box-div {
   display: flex;
@@ -218,7 +222,7 @@ body {
 }
 .primary-details {
   width: 70%;
-  font-size: 16px;
+  font-size: 22px;
   /* padding: 30px;
   line-height: 25px; */
   display: flex;
@@ -229,6 +233,7 @@ body {
   gap: 10px;
   /* border: 1px solid; */
   /* line-height: 20px; */
+  text-transform: capitalize;
 }
 .primary-btn {
   display: flex;
@@ -250,7 +255,7 @@ body {
   box-shadow: none;
 }
 .primary-btn button:hover {
-  background-color: white;
+  background: white;
   color: #00b207;
 }
 ::-webkit-scrollbar {
@@ -442,4 +447,7 @@ body {
   border-radius: 7rem;
   border: 0.5px solid #ccc;
   filter: opacity(0.8);
+}
+.emu{
+  overflow: hidden;
 }

client/src/components/Farmer/FarmNav.jsx

@@ -119,6 +119,12 @@ function Navbar() {
           >
             Notifications
           </li>
+          <li
+            className={activeItem === '/chat' ? styles.activeNavItem : ''}
+            onClick={() => navigate('/chat', { state: { userType:'farmer'} })}
+          >
+            Chats
+          </li>
           {/* <li
             className={activeItem === '/contact' ? styles.activeNavItem : ''}
             onClick={() => handleNavClick('/contact')}

client/src/components/Farmer/FarmSell.jsx

@@ -294,7 +294,7 @@ function FarmSell() {
   };
 
   return (
-    <>
+    <div className={styles.divbody}>
       <Navbar />
       <Search
         searchQuery={searchQuery}
@@ -312,7 +312,7 @@ function FarmSell() {
         </button>
       </div>
       <ToastContainer />
-    </>
+    </div>
   );
 }
 

client/src/components/Farmer/FarmSell.module.css

@@ -6,8 +6,11 @@
 body {
   /* overflow-x: hidden; */
 }
+.divbody{
+  background-color: white;
+}
 .headfs {
-  height: 17vh;
+  height: 140px;
   background-color: green;
   border: 1px solid #ccc;
 }
@@ -102,6 +105,7 @@ body {
   font-weight: 600;
   text-align: center;
 }
+
 .navs ul li:hover{
   /* background-color: #1fe726;
   border :1px solid #1fe726; */
@@ -130,6 +134,7 @@ body {
   justify-content: center;
   gap: 250px;
   border: 0.5px solid rgb(159, 159, 159);
+  background-color: white;
 }
 .search-box-div {
   display: flex;
@@ -210,7 +215,7 @@ body {
   height: 75vh;
   background-color: white;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
   /* margin: 15px; */
   padding-top: 15px;
   justify-items: center;
@@ -233,7 +238,7 @@ body {
   box-shadow: 2px 2px 2px rgba(8, 0, 0, 0.4);
 }
 .box-crop img {
-  width: 90%;
+  width: 100%;
   height: 80%;
   /* justify-self: center; */
   border-radius: 0.3rem;
@@ -254,8 +259,9 @@ body {
 }
 
 .box-crop input[type='radio']:checked {
-  background-color: #00b207;
-  border-color: #00b207;
+  background: linear-gradient(to left top, #a25fff, #7b9afe, #11cbbb, #25fc4c);
+border-color: yellowgreen;
+
 }
 /* ````````````````````````````````````````````````` */
 .formbox {

client/src/components/LandingPage/LandingPage.jsx

@@ -75,8 +75,8 @@ export default function LandingPage() {
 
 
                   <div className="left">
-                  <h1>{slide.caption}</h1>
-                  <p>{slide.description}</p>
+                  <h1 className='h1cap'>{slide.caption}</h1>
+                  <p className='pcap'>{slide.description}</p>
                   <button className="btnii" onClick={()=>{navigate(slide.link)}}>{slide.button}</button>
                   </div>
 
@@ -145,6 +145,7 @@ export default function LandingPage() {
       </section>
 
       {/* How It Works Section */}
+      <div className="howCta">
       <section className="how-it-works">
         <h2>How KrishiSeva Works: A Simple 3-Step Process</h2>
         <ol>
@@ -160,6 +161,7 @@ export default function LandingPage() {
         <p>Already trusted by hundreds of farmers and buyers across the region, KrishiSeva is transforming the agricultural landscape.</p>
         <a href="#" className="button">Start Your Journey with KrishiSeva Today</a>
       </section>
+      </div>
 
       {/* Footer */}
       <footer>

client/src/components/LandingPage/landing.css

@@ -12,7 +12,7 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
-    line-height: 1.6;
+    /* line-height: 1.6; */
     color: #333;
     background-color: #f7f5eb;
 
@@ -45,13 +45,14 @@ body {
 
 .right img{
   height:225px;
-  width:200px;
+  /* width:200px; */
 
 }
 
 .left {
-  width:50%;
-  padding-top:100px;
+  width: 50%;
+    padding-top: 45px;
+    padding-left: 40px;
 }
 
 .right{
@@ -64,8 +65,17 @@ body {
 }
 
 .btnii{
+  margin-top: 20px;
   background-color:#006400;
   color:white;
+  padding: 20px 10px;
+  width: 200px;
+  font-size: 20px;
+  border-radius: 0.5rem;
+}
+
+.btnii:hover{
+  background-color: #097c09;
 }
 
 
@@ -116,7 +126,8 @@ body {
   cursor: pointer;
   position: absolute;
   top: 50%;
-  width: auto;
+  width: 55px
+  ;
   padding: 16px;
   margin-top: -22px;
   color: white;
@@ -217,7 +228,7 @@ body {
 
 .central-section {
     padding: 4rem 2rem;
-    background: rgb(217, 241, 217);
+    background: #eef3d2;
     text-align: center;
 
 }
@@ -249,14 +260,27 @@ body {
 }
 
 .how-it-works, .cta-section {
-    padding: 4rem 2rem;
+    padding: 4rem 1rem;
     text-align: center;
 }
+/* .how-it-works{
+  margin-top: 100px;
+} */
+.cta-section{
+  /* margin-bottom: 2rem; */
+  margin: 0;
+  padding: 0;
+  padding-bottom: 20px;
+}
 
-.how-it-works h2, .cta-section h2 {
-    font-size: 2rem;
+.how-it-works h2{
+    font-size: 32px;
     margin-bottom: 2rem;
 }
+.cta-section h2 {
+  font-size: 32px;
+  margin-bottom: 2rem;
+}
 
 .how-it-works ol {
     list-style: decimal inside;
@@ -267,11 +291,29 @@ body {
 
 .how-it-works li {
     margin-bottom: 1rem;
+    font-size: 18px;
+}
+.cta-section p{
+  font-size: 18px;
+}
+.howCta{
+  /* display: flex;
+  flex-direction: column;
+  gap: 10px; */
 }
-
 footer {
     background: #006400;
     color: #fff;
     padding: 1rem;
     text-align: center;
+}
+
+/* ````````````````````````````````````````````````` */
+
+.h1cap{
+  font-size: 35px;
+  font-weight: 600;
+}
+.pcap{
+  font-size: 22px;
 }