Merge pull request #821 from haseebzaki-07/new_branch_7

Revamp the Agro Rent Navigate products page.

frontend/src/AgroRentAI/NavigateProducts.jsx

@@ -1,12 +1,16 @@
 import React, { useState, useEffect } from 'react';
 import { Search, ShoppingCart, ChevronDown, Star } from 'lucide-react';
 import img1 from "../assets/116.jpg";
+import img2 from "../assets/112.jpg";
+import img3 from "../assets/106.jpg";
 import axios from 'axios';
 import { useNavigate } from 'react-router-dom';
+import "./index.css"
 
 // Assuming the categories list is the same
 const categories = ['All', 'Farming Technology', 'Farming Equipment', 'Agriculture'];
 
+
 const ProductCard = ({ product }) => {
   const navigate = useNavigate();
 
@@ -73,18 +77,95 @@ const FilterSidebar = ({ selectedCategory, setSelectedCategory, priceRange, setP
   </div>
 );
 
-const Banner = ({ title, description }) => (
-  <div
-    className="relative flex items-center justify-center h-64 bg-cover bg-center mb-4 rounded-xl"
-    style={{ backgroundImage: `url(${img1})` }}
-  >
-    <div className="absolute inset-0 bg-black bg-opacity-50 rounded-xl"></div>
-    <div className="relative text-center text-white p-4">
-      <h1 className="text-3xl font-bold">{title}</h1>
-      <p className="mt-2">{description}</p>
+// Array of banners with title, description, and image
+const banners = [
+  {
+    image: img1,
+    title: 'Welcome to AgriRent',
+    description: 'Rent agricultural equipment with ease.',
+  },
+  {
+    image: img2,
+    title: 'Explore Our Products',
+    description: 'Browse a wide range of farming tools and machinery.',
+  },
+  {
+    image: img3,
+    title: 'Get Started Today!',
+    description: 'Sign up and start renting agricultural equipment today.',
+  },
+];
+
+
+const Banner = () => {
+  const [currentBannerIndex, setCurrentBannerIndex] = useState(0);
+  const [transitioning, setTransitioning] = useState(false);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      if (!transitioning) {
+        setCurrentBannerIndex((prevIndex) => (prevIndex + 1) % banners.length);
+      }
+    }, 3000); 
+
+
+    return () => clearInterval(intervalId);
+  }, [transitioning]);
+
+  const goToBanner = (index) => {
+    setTransitioning(true);
+    setCurrentBannerIndex(index);
+    setTimeout(() => setTransitioning(false), 500); 
+  };
+
+  return (
+    <div className="relative">
+      {/* Banner Wrapper */}
+      <div className="relative flex items-center justify-center h-64 bg-cover bg-center rounded-xl overflow-hidden transition-all duration-500 mb-6"
+        style={{ backgroundImage: `url(${banners[currentBannerIndex].image})` }}
+      >
+        {/* Overlay */}
+        <div className="absolute inset-0 bg-black bg-opacity-50 rounded-xl"></div>
+
+        {/* Text Content */}
+        <div className="relative text-center text-white px-4 py-6 z-10">
+          <h1 className="text-3xl font-bold">{banners[currentBannerIndex].title}</h1>
+          <p className="mt-2">{banners[currentBannerIndex].description}</p>
+        </div>
+      </div>
+
+      {/* Dots for Indicating Active Banner */}
+      <div className="absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2 z-10">
+        {banners.map((_, index) => (
+          <button
+            key={index}
+            onClick={() => goToBanner(index)}
+            className={`w-3 h-3 rounded-full ${index === currentBannerIndex ? 'bg-green-600' : 'bg-gray-400'}`}
+          ></button>
+        ))}
+      </div>
+
+      {/* Swipe/Scroll Functionality */}
+      <div
+        className="absolute inset-0"
+        onTouchStart={(e) => {
+          const startX = e.touches[0].clientX;
+          const handleTouchEnd = (e) => {
+            const endX = e.changedTouches[0].clientX;
+            if (startX - endX > 50) {
+              setCurrentBannerIndex((prevIndex) => (prevIndex + 1) % banners.length);
+            } else if (endX - startX > 50) {
+              setCurrentBannerIndex((prevIndex) => (prevIndex - 1 + banners.length) % banners.length);
+            }
+            document.removeEventListener("touchend", handleTouchEnd);
+          };
+          document.addEventListener("touchend", handleTouchEnd);
+        }}
+        onClick={() => setCurrentBannerIndex((prevIndex) => (prevIndex + 1) % banners.length)}  
+      />
     </div>
-  </div>
-);
+  );
+};
 
 const RentalMarketplace = () => {
   const [products, setProducts] = useState([]);
@@ -94,6 +175,7 @@ const RentalMarketplace = () => {
   const [filteredProducts, setFilteredProducts] = useState([]);
   const [selectedCategory, setSelectedCategory] = useState('All');
   const [priceRange, setPriceRange] = useState({ min: 0, max: 100 });
+  const [searchQuery, setSearchQuery] = useState(""); // State for search query
   const ApiUrl = process.env.NODE_ENV === 'production'
     ? 'https://agrotech-ai-11j3.onrender.com'
     : 'http://localhost:8080';
@@ -136,6 +218,35 @@ const RentalMarketplace = () => {
     setFilteredProducts(updatedProducts);
   }, [products, selectedCategory, priceRange, sortBy]);
 
+
+
+  useEffect(() => {
+    let updatedProducts = products;
+
+    if (selectedCategory !== 'All') {
+      updatedProducts = updatedProducts.filter(product => product.category.includes(selectedCategory));
+    }
+
+    updatedProducts = updatedProducts.filter(product => product.price <= priceRange.max);
+
+    // Filter products based on search query
+    if (searchQuery) {
+      updatedProducts = updatedProducts.filter(product => 
+        product.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        product.description.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+
+    if (sortBy === 'price-low-high') {
+      updatedProducts.sort((a, b) => a.price - b.price);
+    } else if (sortBy === 'price-high-low') {
+      updatedProducts.sort((a, b) => b.price - a.price);
+    }
+
+    setFilteredProducts(updatedProducts);
+  }, [products, selectedCategory, priceRange, sortBy, searchQuery]); 
+
+
   if (loading) {
     return <div>Loading products...</div>;
   }
@@ -150,10 +261,12 @@ const RentalMarketplace = () => {
         <div className="container mx-auto px-4 py-4 flex justify-between items-center">
           <h1 className="text-2xl font-bold text-white">AgroRent AI</h1>
           <div className="flex items-center space-x-4">
-            <div className="relative">
+          <div className="relative">
               <input
                 type="text"
                 placeholder="Search products..."
+                value={searchQuery} // Bind the input value to the state
+                onChange={(e) => setSearchQuery(e.target.value)} // Update the search query state
                 className="pl-10 pr-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-green-500"
               />
               <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
@@ -176,7 +289,7 @@ const RentalMarketplace = () => {
             <button
               key={category}
               onClick={() => setSelectedCategory(category)}
-              className={`px-4 py-2 mr-2 rounded-full shadow-sm hover:bg-green-100 transition-colors ${selectedCategory === category ? 'bg-green-200' : 'bg-white'} text-green-700`}
+              className={`px-4 py-2 mr-2 rounded-full shadow-md mb-2 hover:bg-green-100 transition-colors ${selectedCategory === category ? 'bg-green-200' : 'bg-white'} text-green-700`}
             >
               {category}
             </button>

frontend/src/AgroRentAI/index.css

@@ -0,0 +1,16 @@
+/* Styles for the sliding effect */
+.banner-slide {
+    transform: translateX(0);
+    transition: transform 0.5s ease-in-out;
+  }
+
+  /* Slide-in animation */
+  .slide-in {
+    transform: translateX(0); /* No movement, it slides in naturally */
+  }
+
+  /* Slide-out animation */
+  .slide-out {
+    transform: translateX(-100%); /* Move the banner to the left to make space for the next one */
+  }
+

frontend/src/components/SignUpPage.jsx

@@ -231,15 +231,16 @@ const SignUpPage = () => {
               >
                 Sign Up
               </button>
-              <button
+
+
+            </div>
+            <button
             onClick={handleGoogleSignIn}
             className="w-full mt-4 py-2 flex items-center justify-center bg-white text-gray-700 border border-gray-300 rounded-md font-bold transform transition duration-300 hover:scale-105"
           >
             <img src={googleIcon} alt="Google" className="w-6 h-6 mr-2" />
             Sign in with Google
           </button>
-
-            </div>
           </form>
           <p className="text-center text-sm mt-4">
             Already have an account?{" "}