diff --git a/client/src/Landing.jsx b/client/src/Landing.jsx index 7a37be8..8edd5aa 100644 --- a/client/src/Landing.jsx +++ b/client/src/Landing.jsx @@ -2,6 +2,9 @@ import './App.css'; // import Signup from './components/Buyer/Signup'; +import AgriConnect from './components/trial'; +import Navbar from './components/navbar'; +import Footer from './components/footer'; function Landing() { return ( <> diff --git a/client/src/components/LandingPage/AgriConnect.jsx b/client/src/components/LandingPage/AgriConnect.jsx new file mode 100644 index 0000000..0809fb1 --- /dev/null +++ b/client/src/components/LandingPage/AgriConnect.jsx @@ -0,0 +1,143 @@ +import React from "react"; +import 'bootstrap/dist/css/bootstrap.min.css'; + + +const AgriConnect = () => { + return ( + <> + + +
+
+ + +
+
+
+
+
+
+
+
Secure Income, Grow with Confidence
+

Connect directly with reliable buyers, negotiate contracts, and ensure timely payments.

+

Signup|Login as farmer

+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
Source Quality Produce, Hassle-Free
+

Find trusted farmers, negotiate prices, and secure your supply chain with ease.

+

Signup|Login as buyer

+
+
+
+
+ +
+
+
+
+
+
+ + +
+ +
+

Why Choose AgriConnect?

+
+
+ Guaranteed Market Access +

Guaranteed Market Access

+

Connect with verified buyers and secure a steady market for your produce.

+
+
+ Transparent Negotiation +

Transparent Negotiation

+

Discuss terms in real-time and reach agreements with ease.

+
+
+ Secure Contracts +

Secure Contracts

+

Legal assurance with securely stored contracts.

+
+
+ Timely Payments +

Timely Payments

+

Get paid on time, every time with our integrated payment system.

+
+
+ End-to-End Support +

End-to-End Support

+

From initial contact to final delivery, we ensure smooth transactions.

+
+
+
+ +
+

How AgriConnect Works: A Simple 3-Step Process

+
    +
  1. Sign Up & Create Your Profile: Farmers and buyers can easily sign up and create a profile tailored to their needs.
    2. +
  2. Connect & Negotiate: Use our platform to discover potential partners and establish secure contracts.
    3. +
  3. Deliver & Get Paid: Farmers deliver the produce as per the contract and receive timely payments.
    4. +
+
+ +
+

Join a Growing Community of Successful Farmers and Buyers

+
+ + + + ); +}; + +export default AgriConnect; diff --git a/client/src/components/LandingPage/Footer.jsx b/client/src/components/LandingPage/Footer.jsx new file mode 100644 index 0000000..bfdd759 --- /dev/null +++ b/client/src/components/LandingPage/Footer.jsx @@ -0,0 +1,12 @@ +import React from 'react' +import './Landing.css' + +export default function Footer() { + return ( +
+ +
+ ) +} diff --git a/client/src/components/LandingPage/Landing.css b/client/src/components/LandingPage/Landing.css new file mode 100644 index 0000000..928cac9 --- /dev/null +++ b/client/src/components/LandingPage/Landing.css @@ -0,0 +1,362 @@ +@import url('https://fonts.googleapis.com/css2?family=Teko:wght@300..700&display=swap" rel="stylesheet'); +body { + font-family: 'Teko', sans-serif; +} + +.navbar-nav a { + font-size: 15px; + text-transform: uppercase; + font-weight: 500; + font-family: 'Teko', sans-serif; + +} + +.navbar-light .navbar-brand { + color: #000; + font-size: 25px; + text-transform: uppercase; + font-weight: bold; + letter-spacing: 2px; + font-family: 'Teko', sans-serif; +} + +.navbar-brand span { + color: green; +} + +.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover { + color: #000; +} + +.navbar-light .navbar-nav .nav-link { + color: #000; +} + +.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover { + color: green; +} + +.w-100 { + height: 100vh; +} + +.navbar-toggler { + padding: 1px 5px; + font-size: 18px; + line-height: 0.3; + background: #fff; +} + +.navbar-toggler-icon { + background: green; +} + +.navbar-light .navbar-toggler { + color: #FFF; + border-color: transparent; + background: green; +} + +.dropdown-menu { + background-color: #f9f9f9; + border: 1px solid #ddd; +} + +.dropdown-item { + color: #333; + font-family: "Poppins", sans-serif; +} + +.dropdown-item:hover, +.dropdown-item:focus { + background-color: #ff9900; + color: #fff; +} + +.carousel-item { + height: 100vh; + min-height: 300px; + background-color: #f7f5eb; +} + +.carousel-caption { + + bottom: 0; + z-index: 2; + text-align: left; + font-family: 'Teko', sans-serif; +} + +.carousel-caption h5 { + font-size: 40px; + text-transform: uppercase; + letter-spacing: 2px; + margin-top: 25px; + color: #262626; +} + +.carousel-caption p { + font-size: 18px; + line-height: 1.9; + color: #262626; +} + +.banner-info .btn { + padding: 10px 60px; + font-size: 30px; + text-transform: uppercase; + color: #ffff; + background: green; +} + +.banner-info { + padding-top: 25%; +} + +.imgBox img { + width: 700px; +} + +.carousel-control-prev-icon, .carousel-control-next-icon { + height: 80px; + width: 80px; + outline: black; + background-size: 100%, 100%; + border-radius: 50%; + background-image: none; + color: #fff; + background: green; +} + +.carousel-control-next-icon:after { + + font-size: 55px; + color: #fff; +} + +.carousel-control-prev-icon:after { + + font-size: 55px; + color: #fff; +} + +.carousel-indicators [data-bs-target] { + background-color: green; +} + +@media only screen and (min-width: 768px) and (max-width: 991px) { + .navbar-nav { + text-align: center; + } + + .navbar-collapse { + background: green; + } + + .carousel-caption { + bottom: 370px; + } + + .carousel-caption p { + width: 100%; + } + + .navbar-collapse .nav-link { + color: #fff !important; + } + + .carousel-caption { + bottom: 0; + text-align: center; + } +} + +@media only screen and (max-width: 767px) { + .navbar-nav { + text-align: center; + } + + .navbar-collapse { + background: green; + } + + .navbar-collapse .nav-link { + color: #fff !important; + } + + .carousel-caption { + bottom: 0; + text-align: center; + } + + .carousel-caption h5 { + font-size: 17px; + } + + .carousel-caption p { + width: 100%; + line-height: 1.6; + font-size: 12px; + } + + .banner-info .btn { + padding: 0 15px; + font-size: 20px; + } + + .imgBox .img-fluid { + max-width: 80%; + height: auto; + } + + .carousel-control-prev-icon, .carousel-control-next-icon { + height: 50px; + width: 50px; + } + + .carousel-control-next-icon:after { + font-size: 30px; + } + + .carousel-control-prev-icon:after { + font-size: 30px; + } +} + +.imgBox { + position: relative; + top: 140px; + left: 35px; + + +} + +.imgBox1 { + position: relative; + top: 140px; + left: 35px; + +} + +.central-section { + padding: 4rem 2rem; + background: rgb(238, 246, 215); + text-align: center; +} + +.central-section h2 { + font-size: 2rem; + margin-bottom: 2rem; + font-family: 'Teko', sans-serif; +} + +.features { + display: flex; + justify-content: space-around; + flex-wrap: wrap; +} + +.feature { + flex: 1; + margin: 1rem; + padding: 1rem; + background: #fff; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +.feature h3 { + font-size: 1.5rem; + margin-bottom: 1rem; + font-family: 'Teko', sans-serif; +} + +.how-it-works, .cta-section { + padding: 4rem 2rem; + text-align: center; +} + +.how-it-works h2, .cta-section h2 { + font-size: 2rem; + margin-bottom: 2rem; + font-family: 'Teko', sans-serif; +} + +.how-it-works ol { + list-style: decimal inside; + text-align: left; + max-width: 800px; + margin: 0 auto; + font-size: x-large; +} + +.how-it-works li { + margin-bottom: 1rem; +} + +.how-it-works li strong { + color: #83ae83; +} + +.how-it-works { + background-color: #f7f5eb; +} + +footer { + background: #006400; + color: #fff; + padding: 1rem; + text-align: center; +} + +.logo { + font-family: "Poppins", sans-serif; + font-weight: 400; + font-size: x-large; + color: #44a544; + display: flex; + justify-content: space-between; + align-items: left; + width: 80%; +} + +.feature img { + height: 90px; + width: 90px; + object-fit: cover; +} +/* Ensure Flexbox for the buttons container */ +.nav-item.dropdown.d-flex { + display: flex; + gap: 10px; /* Adjust spacing between the buttons */ +} + +/* Ensure buttons look consistent */ +.navbar-nav .btn { + background-color: #f7f5eb; + border: none; + color: #000; +} + +/* Button hover effects */ +.navbar-nav .btn:hover { + color: #fff; + background-color: green; +} + +/* Dropdown menu styling */ +.dropdown-menu { + background-color: #f9f9f9; + border: 1px solid #ddd; +} + +.dropdown-item { + color: #333; +} + +.dropdown-item:hover, .dropdown-item:focus { + background-color: #ff9900; + color: #fff; +} + + diff --git a/client/src/components/LandingPage/Navbar.jsx b/client/src/components/LandingPage/Navbar.jsx new file mode 100644 index 0000000..f871e21 --- /dev/null +++ b/client/src/components/LandingPage/Navbar.jsx @@ -0,0 +1,47 @@ +import React from "react"; +import 'bootstrap/dist/css/bootstrap.min.css'; +import './Landing.css'; +export default function Navbar() +{ + return ( + <> + + + + + + + + + + ) +} \ No newline at end of file