Spaces:

jcarnel
/

projects256

Running

App Files Files Community

jcarnel commited on May 11, 2025

Commit

940ac0a

verified ·

1 Parent(s): 1878d4d

Add 2 files

Browse files

Files changed (2) hide show

index.html +668 -666
prompts.txt +2 -1

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Truism Marketplace - Connecting Farmers to Markets</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script>
@@ -22,29 +22,38 @@
         }
     </script>
     <style>
-        .hero-gradient {
-            background: linear-gradient(135deg, #1F7349 0%, #0D4D2B 100%);
         }
-        .product-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
         }
         .transition-smooth {
             transition: all 0.3s ease-in-out;
         }
-        .nav-link:hover {
-            color: #F9A51A;
         }
-        .btn-primary:hover {
-            background-color: #0D4D2B;
         }
-        .btn-secondary:hover {
-            background-color: #e69500;
         }
         /* Custom scrollbar */
@@ -64,741 +73,734 @@
     </style>
 </head>
 <body class="font-sans bg-gray-50">
-    <!-- Navigation -->
-    <nav class="bg-white shadow-md sticky top-0 z-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="flex justify-between h-20 items-center">
-                <div class="flex items-center">
-                    <div class="flex-shrink-0">
-                        <img src="https://truismhl.com/wp-content/uploads/2023/05/logo.png" alt="Truism Logo" class="h-12">
-                    </div>
-                    <div class="hidden md:ml-10 md:flex md:space-x-8">
-                        <a href="#" class="text-truismPrimary font-medium border-b-2 border-truismPrimary py-2 px-1">Home</a>
-                        <a href="#marketplace" class="nav-link text-gray-600 hover:text-truismSecondary py-2 px-1">Marketplace</a>
-                        <a href="#services" class="nav-link text-gray-600 hover:text-truismSecondary py-2 px-1">Services</a>
-                        <a href="#about" class="nav-link text-gray-600 hover:text-truismSecondary py-2 px-1">About</a>
-                        <a href="#contact" class="nav-link text-gray-600 hover:text-truismSecondary py-2 px-1">Contact</a>
                     </div>
                 </div>
-                <div class="hidden md:flex items-center space-x-4">
-                    <button class="relative text-gray-600 hover:text-truismPrimary">
-                        <i class="fas fa-shopping-cart text-xl"></i>
-                        <span class="absolute -top-2 -right-2 bg-truismSecondary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>
-                    </button>
-                    <button onclick="toggleLoginModal()" class="bg-truismPrimary text-white px-6 py-2 rounded-md font-medium hover:bg-truismDark transition-smooth">
-                        Login
-                    </button>
                 </div>
-                <div class="-mr-2 flex items-center md:hidden">
-                    <button type="button" onclick="toggleMobileMenu()" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-truismPrimary">
-                        <span class="sr-only">Open main menu</span>
-                        <i class="fas fa-bars text-xl"></i>
-                    </button>
                 </div>
-            </div>
-        </div>
-        <!-- Mobile menu -->
-        <div class="md:hidden hidden" id="mobile-menu">
-            <div class="pt-2 pb-3 space-y-1 px-4">
-                <a href="#" class="block py-2 px-3 text-base font-medium text-truismPrimary bg-truismLight rounded-md">Home</a>
-                <a href="#marketplace" class="block py-2 px-3 text-base font-medium text-gray-600 hover:text-truismSecondary hover:bg-gray-50 rounded-md">Marketplace</a>
-                <a href="#services" class="block py-2 px-3 text-base font-medium text-gray-600 hover:text-truismSecondary hover:bg-gray-50 rounded-md">Services</a>
-                <a href="#about" class="block py-2 px-3 text-base font-medium text-gray-600 hover:text-truismSecondary hover:bg-gray-50 rounded-md">About</a>
-                <a href="#contact" class="block py-2 px-3 text-base font-medium text-gray-600 hover:text-truismSecondary hover:bg-gray-50 rounded-md">Contact</a>
-                <div class="pt-4 border-t border-gray-200">
-                    <div class="flex items-center space-x-4">
-                        <button class="relative text-gray-600 hover:text-truismPrimary">
-                            <i class="fas fa-shopping-cart text-xl"></i>
-                            <span class="absolute -top-2 -right-2 bg-truismSecondary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>
-                        </button>
-                        <button onclick="toggleLoginModal()" class="bg-truismPrimary text-white px-6 py-2 rounded-md font-medium hover:bg-truismDark transition-smooth w-full">
-                            Login
-                        </button>
-                    </div>
                 </div>
             </div>
         </div>
-    </nav>
-    <!-- Hero Section -->
-    <div class="hero-gradient text-white">
-        <div class="max-w-7xl mx-auto px-4 py-24 sm:px-6 lg:px-8">
-            <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
-                <div class="mb-12 lg:mb-0">
-                    <h1 class="text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl">
-                        Truism Marketplace
-                    </h1>
-                    <p class="mt-6 text-xl leading-8">
-                        Connecting farmers directly to buyers through our transparent agricultural marketplace.
-                    </p>
-                    <div class="mt-10 flex flex-wrap gap-4">
-                        <a href="#marketplace" class="bg-truismSecondary text-white px-8 py-3 rounded-md font-medium hover:bg-yellow-600 transition-smooth">
-                            Browse Products
-                        </a>
-                        <a href="#" class="bg-white text-truismPrimary px-8 py-3 rounded-md font-medium hover:bg-gray-100 transition-smooth">
-                            Sell With Us
-                        </a>
                     </div>
                 </div>
-                <div class="relative">
-                    <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Farm produce" class="rounded-lg shadow-2xl">
-                    <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-lg shadow-lg hidden md:block">
                         <div class="flex items-center">
-                            <div class="bg-truismLight p-3 rounded-full mr-4">
-                                <i class="fas fa-leaf text-truismPrimary text-xl"></i>
                             </div>
                             <div>
-                                <p class="text-sm text-gray-500">Farmers Connected</p>
-                                <p class="text-2xl font-bold text-truismPrimary">2,500+</p>
                             </div>
                         </div>
                     </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Stats Section -->
-    <div class="bg-white py-16">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
-                <div class="p-6">
-                    <p class="text-4xl font-bold text-truismPrimary">95%</p>
-                    <p class="mt-2 text-gray-600">Supply Chain Efficiency</p>
-                </div>
-                <div class="p-6">
-                    <p class="text-4xl font-bold text-truismPrimary">30%</p>
-                    <p class="mt-2 text-gray-600">Increased Farmer Income</p>
-                </div>
-                <div class="p-6">
-                    <p class="text-4xl font-bold text-truismPrimary">1,200+</p>
-                    <p class="mt-2 text-gray-600">Active Buyers</p>
-                </div>
-                <div class="p-6">
-                    <p class="text-4xl font-bold text-truismPrimary">24h</p>
-                    <p class="mt-2 text-gray-600">Average Delivery Time</p>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Marketplace Section -->
-    <div id="marketplace" class="py-16 bg-gray-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-12">
-                <h2 class="text-3xl font-bold text-truismPrimary">Agricultural Marketplace</h2>
-                <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
-                    Browse our selection of high-quality agricultural products sourced directly from farmers.
-                </p>
-            </div>
-            <div class="flex justify-center mb-8">
-                <div class="inline-flex rounded-md shadow-sm" role="group">
-                    <button type="button" onclick="filterProducts('all')" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-truismPrimary text-white">
-                        All Products
-                    </button>
-                    <button type="button" onclick="filterProducts('pulses')" class="px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50">
-                        Dry Pulses
-                    </button>
-                    <button type="button" onclick="filterProducts('herbs')" class="px-4 py-2 text-sm font-medium bg-white text-gray-700 hover:bg-gray-50">
-                        Herbs & Spices
-                    </button>
-                    <button type="button" onclick="filterProducts('oil')" class="px-4 py-2 text-sm font-medium rounded-r-lg bg-white text-gray-700 hover:bg-gray-50">
-                        Oil Seeds
-                    </button>
-                </div>
-            </div>
-            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8" id="product-container">
-                <!-- Products will be loaded here via JavaScript -->
-            </div>
-            <div class="mt-12 text-center">
-                <button class="bg-white text-truismPrimary px-8 py-3 rounded-md font-medium border border-truismPrimary hover:bg-truismLight transition-smooth">
-                    Load More Products
-                </button>
-            </div>
-        </div>
-    </div>
-    <!-- Services Section -->
-    <div id="services" class="py-16 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-12">
-                <h2 class="text-3xl font-bold text-truismPrimary">Our Services</h2>
-                <p class="mt-4 text-lg text-gray-600 max-w-3xl mx-auto">
-                    Comprehensive solutions for farmers and buyers across the agricultural value chain.
-                </p>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-truismLight p-8 rounded-lg hover:shadow-lg transition-smooth">
-                    <div class="bg-truismPrimary w-16 h-16 rounded-full flex items-center justify-center text-white mb-6">
-                        <i class="fas fa-truck text-2xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold text-truismPrimary mb-3">Logistics Solutions</h3>
-                    <p class="text-gray-600">
-                        Our optimized logistics network ensures timely delivery of agricultural products from farm to buyer with minimal waste.
-                    </p>
-                </div>
-                <div class="bg-truismLight p-8 rounded-lg hover:shadow-lg transition-smooth">
-                    <div class="bg-truismPrimary w-16 h-16 rounded-full flex items-center justify-center text-white mb-6">
-                        <i class="fas fa-chart-line text-2xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold text-truismPrimary mb-3">Market Insights</h3>
-                    <p class="text-gray-600">
-                        Access real-time pricing data and market trends to make informed buying and selling decisions.
-                    </p>
-                </div>
-                <div class="bg-truismLight p-8 rounded-lg hover:shadow-lg transition-smooth">
-                    <div class="bg-truismPrimary w-16 h-16 rounded-full flex items-center justify-center text-white mb-6">
-                        <i class="fas fa-hand-holding-usd text-2xl"></i>
-                    </div>
-                    <h3 class="text-xl font-bold text-truismPrimary mb-3">Financial Services</h3>
-                    <p class="text-gray-600">
-                        Flexible payment solutions and financing options for both farmers and buyers to facilitate smooth transactions.
-                    </p>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Testimonials Section -->
-    <div class="py-16 bg-gray-50">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="text-center mb-12">
-                <h2 class="text-3xl font-bold text-truismPrimary">What Our Partners Say</h2>
-            </div>
-            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
-                <div class="bg-white p-8 rounded-lg shadow-sm">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold mr-4">JK</div>
-                        <div>
-                            <h4 class="font-medium text-gray-900">James Kariuki</h4>
-                            <p class="text-sm text-gray-500">Smallholder Farmer</p>
                         </div>
                     </div>
-                    <p class="text-gray-600 mb-4">
-                        "Truism has transformed my farming business. I now get fair prices for my produce and payments come quickly."
-                    </p>
-                    <div class="text-truismSecondary">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                    </div>
-                </div>
-                <div class="bg-white p-8 rounded-lg shadow-sm">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold mr-4">AM</div>
-                        <div>
-                            <h4 class="font-medium text-gray-900">Amina Mohamed</h4>
-                            <p class="text-sm text-gray-500">Food Processor</p>
                         </div>
                     </div>
-                    <p class="text-gray-600 mb-4">
-                        "The quality of products through Truism is consistently high, and their logistics are reliable. It's changed how we source raw materials."
-                    </p>
-                    <div class="text-truismSecondary">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star-half-alt"></i>
                     </div>
                 </div>
-                <div class="bg-white p-8 rounded-lg shadow-sm">
-                    <div class="flex items-center mb-4">
-                        <div class="w-12 h-12 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold mr-4">PO</div>
-                        <div>
-                            <h4 class="font-medium text-gray-900">Paul Omondi</h4>
-                            <p class="text-sm text-gray-500">Retail Distributor</p>
                         </div>
                     </div>
-                    <p class="text-gray-600 mb-4">
-                        "Truism's platform gives me visibility into inventory levels and pricing trends. It's reduced our stockouts by 70%."
-                    </p>
-                    <div class="text-truismSecondary">
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
-                        <i class="fas fa-star"></i>
                     </div>
                 </div>
-            </div>
-        </div>
-    </div>
-    <!-- About Section -->
-    <div id="about" class="py-16 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
-                <div class="mb-12 lg:mb-0">
-                    <h2 class="text-3xl font-bold text-truismPrimary mb-6">About Truism</h2>
-                    <p class="text-gray-600 mb-4">
-                        Truism is an agricultural technology company dedicated to creating equitable and efficient supply chains that benefit all stakeholders.
-                    </p>
-                    <p class="text-gray-600 mb-6">
-                        Founded in 2020, our platform connects smallholder farmers directly with processors, distributors, and retailers, eliminating middlemen and ensuring fair prices.
-                    </p>
-                    <div class="bg-truismLight p-6 rounded-lg">
-                        <h4 class="font-bold text-truismPrimary mb-3">Our Mission</h4>
-                        <p class="text-gray-600">
-                            To empower farmers through technology while providing buyers with reliable access to high-quality agricultural products.
-                        </p>
                     </div>
-                </div>
-                <div>
-                    <img src="https://images.unsplash.com/photo-1601134467661-3d775b999c8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1075&q=80" alt="Farmers working" class="rounded-lg shadow-lg">
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- CTA Section -->
-    <div class="py-16 bg-truismPrimary text-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h2 class="text-3xl font-bold mb-6">Ready to Join Our Marketplace?</h2>
-            <p class="text-xl mb-8 max-w-3xl mx-auto">
-                Whether you're a farmer looking to sell your produce or a buyer seeking quality agricultural products, Truism has you covered.
-            </p>
-            <div class="flex flex-wrap justify-center gap-4">
-                <a href="#" class="bg-truismSecondary text-white px-8 py-3 rounded-md font-medium hover:bg-yellow-600 transition-smooth">
-                    Sign Up as Farmer
-                </a>
-                <a href="#" class="bg-white text-truismPrimary px-8 py-3 rounded-md font-medium hover:bg-gray-100 transition-smooth">
-                    Register as Buyer
-                </a>
-            </div>
-        </div>
-    </div>
-    <!-- Contact Section -->
-    <div id="contact" class="py-16 bg-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div class="lg:grid lg:grid-cols-2 lg:gap-12">
-                <div class="mb-12 lg:mb-0">
-                    <h2 class="text-3xl font-bold text-truismPrimary mb-6">Contact Us</h2>
-                    <div class="space-y-6">
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0">
-                                <i class="fas fa-map-marker-alt text-truismSecondary mt-1"></i>
                             </div>
-                            <div class="ml-4">
-                                <h4 class="font-medium text-gray-900">Headquarters</h4>
-                                <p class="text-gray-600">Nairobi, Kenya</p>
                             </div>
                         </div>
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0">
-                                <i class="fas fa-phone-alt text-truismSecondary mt-1"></i>
                             </div>
-                            <div class="ml-4">
-                                <h4 class="font-medium text-gray-900">Phone</h4>
-                                <p class="text-gray-600">+254 700 123456</p>
-                                <p class="text-sm text-gray-500">Mon-Fri, 8am-5pm</p>
                             </div>
                         </div>
-                        <div class="flex items-start">
-                            <div class="flex-shrink-0">
-                                <i class="fas fa-envelope text-truismSecondary mt-1"></i>
                             </div>
-                            <div class="ml-4">
-                                <h4 class="font-medium text-gray-900">Email</h4>
-                                <p class="text-gray-600">info@truismhl.com</p>
                             </div>
                         </div>
-                    </div>
-                    <div class="mt-8">
-                        <h4 class="font-medium text-gray-900 mb-4">Follow Us</h4>
-                        <div class="flex space-x-4">
-                            <a href="#" class="text-gray-600 hover:text-truismPrimary text-xl">
-                                <i class="fab fa-facebook-f"></i>
-                            </a>
-                            <a href="#" class="text-gray-600 hover:text-truismPrimary text-xl">
-                                <i class="fab fa-twitter"></i>
-                            </a>
-                            <a href="#" class="text-gray-600 hover:text-truismPrimary text-xl">
-                                <i class="fab fa-linkedin-in"></i>
-                            </a>
-                            <a href="#" class="text-gray-600 hover:text-truismPrimary text-xl">
-                                <i class="fab fa-instagram"></i>
-                            </a>
                         </div>
                     </div>
                 </div>
-                <div>
-                    <form class="space-y-6">
-                        <div>
-                            <label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
-                            <input type="text" id="name" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-truismPrimary focus:border-truismPrimary">
-                        </div>
-                        <div>
-                            <label for="email" class="block text-sm font-medium text-gray-700">Email Address</label>
-                            <input type="email" id="email" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-truismPrimary focus:border-truismPrimary">
-                        </div>
-                        <div>
-                            <label for="subject" class="block text-sm font-medium text-gray-700">Subject</label>
-                            <select id="subject" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-truismPrimary focus:border-truismPrimary">
-                                <option>General Inquiry</option>
-                                <option>Farmer Registration</option>
-                                <option>Buyer Registration</option>
-                                <option>Technical Support</option>
-                            </select>
-                        </div>
-                        <div>
-                            <label for="message" class="block text-sm font-medium text-gray-700">Message</label>
-                            <textarea id="message" rows="4" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-truismPrimary focus:border-truismPrimary"></textarea>
-                        </div>
-                        <div>
-                            <button type="submit" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-truismPrimary hover:bg-truismDark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-truismPrimary">
-                                Send Message
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            </div>
         </div>
     </div>
-    <!-- Footer -->
-    <footer class="bg-truismDark text-white">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
-                <div>
-                    <img src="https://truismhl.com/wp-content/uploads/2023/05/logo.png" alt="Truism Logo" class="h-12 mb-4">
-                    <p class="text-gray-300 text-sm">
-                        Connecting farmers to markets through technology and innovation.
-                    </p>
-                </div>
-                <div>
-                    <h3 class="text-lg font-medium mb-4">Quick Links</h3>
-                    <ul class="space-y-2 text-sm text-gray-300">
-                        <li><a href="#" class="hover:text-white">Home</a></li>
-                        <li><a href="#marketplace" class="hover:text-white">Marketplace</a></li>
-                        <li><a href="#services" class="hover:text-white">Services</a></li>
-                        <li><a href="#about" class="hover:text-white">About Us</a></li>
-                        <li><a href="#contact" class="hover:text-white">Contact</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-lg font-medium mb-4">Products</h3>
-                    <ul class="space-y-2 text-sm text-gray-300">
-                        <li><a href="#" class="hover:text-white">Dry Pulses</a></li>
-                        <li><a href="#" class="hover:text-white">Herbs & Spices</a></li>
-                        <li><a href="#" class="hover:text-white">Oil Seeds</a></li>
-                        <li><a href="#" class="hover:text-white">Logistics</a></li>
-                        <li><a href="#" class="hover:text-white">Market Data</a></li>
-                    </ul>
-                </div>
-                <div>
-                    <h3 class="text-lg font-medium mb-4">Newsletter</h3>
-                    <p class="text-gray-300 text-sm mb-4">
-                        Subscribe to our newsletter for the latest updates.
-                    </p>
-                    <form class="flex">
-                        <input type="email" placeholder="Your email" class="bg-truismPrimary text-white placeholder-gray-300 px-4 py-2 rounded-l-md focus:outline-none focus:ring-1 focus:ring-truismSecondary w-full">
-                        <button type="submit" class="bg-truismSecondary text-truismDark px-4 py-2 rounded-r-md hover:bg-yellow-600 focus:outline-none focus:ring-1 focus:ring-truismSecondary">
-                            <i class="fas fa-paper-plane"></i>
-                        </button>
-                    </form>
                 </div>
-            </div>
-            <div class="border-t border-truismPrimary mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
-                <p class="text-sm text-gray-300">
-                    &copy; 2023 Truism. All rights reserved.
-                </p>
-                <div class="flex space-x-6 mt-4 md:mt-0">
-                    <a href="#" class="text-gray-300 hover:text-white">
-                        <span class="sr-only">Facebook</span>
-                        <i class="fab fa-facebook-f"></i>
-                    </a>
-                    <a href="#" class="text-gray-300 hover:text-white">
-                        <span class="sr-only">Twitter</span>
-                        <i class="fab fa-twitter"></i>
-                    </a>
-                    <a href="#" class="text-gray-300 hover:text-white">
-                        <span class="sr-only">Instagram</span>
-                        <i class="fab fa-instagram"></i>
-                    </a>
-                    <a href="#" class="text-gray-300 hover:text-white">
-                        <span class="sr-only">LinkedIn</span>
-                        <i class="fab fa-linkedin-in"></i>
-                    </a>
                 </div>
             </div>
-        </div>
-    </footer>
-    <!-- Login Modal -->
-    <div id="loginModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
-        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
-            </div>
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
-                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                    <div class="sm:flex sm:items-start">
-                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-truismPrimary sm:mx-0 sm:h-10 sm:w-10">
-                            <i class="fas fa-user text-white"></i>
-                        </div>
-                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
-                            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
-                                Login to Your Account
-                            </h3>
-                            <div class="mt-2">
-                                <form class="space-y-4">
-                                    <div>
-                                        <label for="modalEmail" class="block text-sm font-medium text-gray-700">Email</label>
-                                        <input type="email" id="modalEmail" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-truismPrimary focus:border-truismPrimary">
-                                    </div>
-                                    <div>
-                                        <label for="modalPassword" class="block text-sm font-medium text-gray-700">Password</label>
-                                        <input type="password" id="modalPassword" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-truismPrimary focus:border-truismPrimary">
-                                    </div>
-                                    <div class="flex items-center justify-between">
-                                        <div class="flex items-center">
-                                            <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 text-truismPrimary focus:ring-truismPrimary border-gray-300 rounded">
-                                            <label for="remember-me" class="ml-2 block text-sm text-gray-900">
-                                                Remember me
-                                            </label>
-                                        </div>
-                                        <div class="text-sm">
-                                            <a href="#" class="font-medium text-truismPrimary hover:text-truismDark">
-                                                Forgot your password?
-                                            </a>
-                                        </div>
-                                    </div>
-                                    <div>
-                                        <button type="button" onclick="loginUser()" class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-truismPrimary hover:bg-truismDark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-truismPrimary">
-                                            Sign in
-                                        </button>
-                                    </div>
-                                </form>
-                                <div class="mt-4 text-center">
-                                    <p class="text-sm text-gray-600">
-                                        Don't have an account?
-                                        <a href="#" class="font-medium text-truismPrimary hover:text-truismDark">
-                                            Register here
-                                        </a>
-                                    </p>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
-                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
-                    <button type="button" onclick="toggleLoginModal()" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-truismPrimary sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
-                        Close
-                    </button>
-                </div>
-            </div>
-        </div>
-    </div>
-    <!-- Product Quick View Modal -->
-    <div id="productModal" class="fixed inset-0 z-50 hidden overflow-y-auto">
-        <div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
-            <div class="fixed inset-0 transition-opacity" aria-hidden="true">
-                <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
-            </div>
-            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
-            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
-                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
-                    <div class="sm:flex sm:items-start">
-                        <button type="button" onclick="toggleProductModal()" class="absolute top-4 right-4 text-gray-400 hover:text-gray-500">
-                            <i class="fas fa-times text-xl"></i>
-                        </button>
-                        <div class="mt-3 text-center sm:mt-0 sm:text-left w-full">
-                            <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                                 <div>
-                                    <img id="modalProductImage" src="" alt="Product" class="rounded-lg w-full">
                                 </div>
                                 <div>
-                                    <h3 class="text-2xl font-bold text-gray-900 mb-2" id="modalProductName"></h3>
-                                    <div class="flex items-center mb-4">
-                                        <div class="text-truismSecondary mr-2">
                                             <i class="fas fa-star"></i>
                                             <i class="fas fa-star"></i>
                                             <i class="fas fa-star"></i>
                                             <i class="fas fa-star"></i>
                                             <i class="fas fa-star-half-alt"></i>
                                         </div>
-                                        <span class="text-sm text-gray-500">(24 reviews)</span>
                                     </div>
-                                    <p class="text-truismPrimary text-2xl font-bold mb-4" id="modalProductPrice"></p>
-                                    <p class="text-gray-600 mb-6" id="modalProductDescription"></p>
-                                    <div class="flex items-center mb-6">
-                                        <span class="text-gray-700 mr-4">Quantity:</span>
-                                        <div class="flex items-center border border-gray-300 rounded">
-                                            <button class="px-3 py-1 text-gray-600 hover:bg-gray-100">-</button>
-                                            <span class="px-3 py-1">1</span>
-                                            <button class="px-3 py-1 text-gray-600 hover:bg-gray-100">+</button>
                                         </div>
                                     </div>
-                                    <div class="flex space-x-4">
-                                        <button class="bg-truismPrimary text-white px-6 py-3 rounded-md font-medium hover:bg-truismDark transition-smooth flex-1">
-                                            <i class="fas fa-shopping-cart mr-2"></i> Add to Cart
-                                        </button>
-                                        <button class="border border-truismPrimary text-truismPrimary px-6 py-3 rounded-md font-medium hover:bg-truismLight transition-smooth">
-                                            <i class="far fa-heart"></i>
-                                        </button>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
-                </div>
             </div>
         </div>
     </div>
-    <script>
-        // Sample product data
-        const products = [
-            {
-                id: 1,
-                name: "Premium Pigeon Peas",
-                category: "pulses",
-                price: "$2.50/kg",
-                description: "High-quality pigeon peas sourced directly from smallholder farmers in Eastern Kenya. Ideal for both domestic and commercial use.",
-                image: "https://images.unsplash.com/photo-1603569283847-aa6f0c5d9d5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
-                stock: "In Stock (245kg)"
-            },
-            {
-                id: 2,
-                name: "Organic Turmeric Powder",
-                category: "herbs",
-                price: "$5.20/kg",
-                description: "Pure organic turmeric powder with high curcumin content. Grown without synthetic pesticides or fertilizers.",
-                image: "https://images.unsplash.com/photo-1596043756921-6b09789a9c36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
-                stock: "Low Stock (32kg)"
-            },
-            {
-                id: 3,
-                name: "White Sesame Seeds",
-                category: "oil",
-                price: "$3.75/kg",
-                description: "Premium hulled white sesame seeds with 99% purity. Perfect for baking, cooking, and oil extraction.",
-                image: "https://images.unsplash.com/photo-1594282486555-1b5c6e0e63f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80",
-                stock: "In Stock (150kg)"
-            },
-            {
-                id: 4,
-                name: "Green Grams (Whole)",
-                category: "pulses",
-                price: "$2.80/kg",
-                description: "Whole green grams with excellent cooking qualities. Rich in protein and fiber.",
-                image: "https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80",
-                stock: "In Stock (180kg)"
-            },
-            {
-                id: 5,
-                name: "Chili Powder",
-                category: "herbs",
-                price: "$6.40/kg",
-                description: "Hot chili powder made from sun-dried red chilies. Perfect for adding spice to your dishes.",
-                image: "https://images.unsplash.com/photo-1603048719537-93a64b424f0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
-                stock: "In Stock (75kg)"
-            },
-            {
-                id: 6,
-                name: "Sunflower Seeds",
-                category: "oil",
-                price: "$4.20/kg",
-                description: "High-quality sunflower seeds with high oil content. Ideal for snacking or oil extraction.",
-                image: "https://images.unsplash.com/photo-1594282486555-1b5c6e0e63f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80",
-                stock: "In Stock (210kg)"
-            }
-        ];
-        // Load products on page load
-        document.addEventListener('DOMContentLoaded', function() {
-            loadProducts('all');
-        });
-        // Load products based on category
-        function loadProducts(category) {
-            const container = document.getElementById('product-container');
-            container.innerHTML = '';
-            let filteredProducts = products;
-            if (category !== 'all') {
-                filteredProducts = products.filter(product => product.category === category);
-            }
-            filteredProducts.forEach(product => {
-                const productCard = document.createElement('div');
-                productCard.className = 'bg-white rounded-lg shadow-md overflow-hidden product-card transition-smooth';
-                productCard.innerHTML = `
-                    <div class="relative">
-                        <img src="${product.image}" alt="${product.name}" class="w-full h-48 object-cover">
-                        <span class="absolute top-2 right-2 bg-truismSecondary text-white text-xs font-bold px-2 py-1 rounded">${product.stock}</span>
-                    </div>
-                    <div class="p-4">
-                        <h3 class="text-lg font-semibold text-gray-900 mb-1">${product.name}</h3>
-                        <p class="text-truismPrimary font-bold text-lg mb-2">${product.price}</p>
-                        <p class="text-gray-600 text-sm mb-4 line-clamp-2">${product.description}</p>
-                        <div class="flex justify-between items-center">
-                            <button onclick="viewProduct(${product.id})" class="bg-truismPrimary text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-truismDark transition-smooth">
-                                View Details
-                            </button>
-                            <button class="text-truismPrimary hover:text-truismDark">
-                                <i class="far fa-heart text-xl"></i>
-                            </button>
-                        </div>
-                    </div>
-                `;
-                container.appendChild(productCard);
-            });
-        }
-        // Filter products by category
-        function filterProducts(category) {
-            loadProducts(category);
         }
-        // View product details
-        function viewProduct(id) {
-            const product = products.find(p => p.id === id);
-            if (product) {
-                document.getElementById('modalProductImage').src = product.image;
-                document.getElementById('modalProductName').textContent = product.name;
-                document.getElementById('modalProductPrice').textContent = product.price;
-                document.getElementById('modalProductDescription').textContent = product.description;
-                toggleProductModal();
             }
-        }
-        // Toggle mobile menu
-        function toggleMobileMenu() {
-            const mobileMenu = document.getElementById('mobile-menu');
-            mobileMenu.classList.toggle('hidden');
-        }
-        // Toggle login modal
-        function toggleLoginModal() {
-            const loginModal = document.getElementById('loginModal');
-            loginModal.classList.toggle('hidden');
-        }
-        // Toggle product modal
-        function toggleProductModal() {
-            const productModal = document.getElementById('productModal');
-            productModal.classList.toggle('hidden');
         }
-        // Login user (simplified for demo)
-        function loginUser() {
-            alert('Login functionality would be implemented here');
-            toggleLoginModal();
         }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jcarnel/projects256" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Truism Marketplace - Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <script>
         }
     </script>
     <style>
+        .dashboard-nav {
+            height: calc(100vh - 4rem);
         }
+        .active-tab {
+            background-color: #E8F3EC;
+            color: #1F7349;
+            border-left: 4px solid #F9A51A;
         }
         .transition-smooth {
             transition: all 0.3s ease-in-out;
         }
+        .order-status-pending {
+            background-color: #FEF3C7;
+            color: #92400E;
         }
+        .order-status-shipped {
+            background-color: #D1FAE5;
+            color: #065F46;
         }
+        .order-status-delivered {
+            background-color: #E0F2FE;
+            color: #0369A1;
+        }
+        .order-status-cancelled {
+            background-color: #FEE2E2;
+            color: #B91C1C;
         }
         /* Custom scrollbar */
     </style>
 </head>
 <body class="font-sans bg-gray-50">
+    <!-- Dashboard Navigation -->
+    <div class="flex">
+        <!-- Sidebar -->
+        <div class="bg-white shadow-md w-64 fixed dashboard-nav">
+            <div class="p-4 border-b border-gray-200">
+                <img src="https://truismhl.com/wp-content/uploads/2023/05/logo.png" alt="Truism Logo" class="h-10">
+            </div>
+            <div class="p-4">
+                <div class="flex items-center mb-6">
+                    <div class="w-12 h-12 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold mr-3">JD</div>
+                    <div>
+                        <p class="font-medium">John Doe</p>
+                        <p class="text-sm text-gray-500">Buyer Account</p>
                     </div>
                 </div>
+                <div class="mb-8">
+                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Main</p>
+                    <a href="#" class="block py-2 px-3 mb-1 rounded active-tab">
+                        <i class="fas fa-tachometer-alt mr-2"></i> Dashboard
+                    </a>
+                    <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                        <i class="fas fa-shopping-cart mr-2"></i> Orders
+                    </a>
+                    <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                        <i class="fas fa-heart mr-2"></i> Wishlist
+                    </a>
+                    <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                        <i class="fas fa-bell mr-2"></i> Notifications
+                    </a>
                 </div>
+                <div class="mb-8">
+                    <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Account</p>
+                    <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                        <i class="fas fa-user mr-2"></i> Profile
+                    </a>
+                    <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                        <i class="fas fa-lock mr-2"></i> Security
+                    </a>
+                    <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                        <i class="fas fa-credit-card mr-2"></i> Payment Methods
+                    </a>
+                    <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                        <i class="fas fa-map-marker-alt mr-2"></i> Addresses
+                    </a>
                 </div>
+                <div>
+                    <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100 text-red-500">
+                        <i class="fas fa-sign-out-alt mr-2"></i> Logout
+                    </a>
                 </div>
             </div>
         </div>
+        <!-- Main Content -->
+        <div class="flex-1 ml-64">
+            <!-- Top Navigation -->
+            <nav class="bg-white shadow-sm">
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between h-16 items-center">
+                        <div class="flex items-center">
+                            <h1 class="text-xl font-semibold text-gray-900">Buyer Dashboard</h1>
+                        </div>
+                        <div class="flex items-center space-x-4">
+                            <button class="relative text-gray-600 hover:text-truismPrimary">
+                                <i class="fas fa-bell text-xl"></i>
+                                <span class="absolute -top-1 -right-1 bg-truismSecondary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>
+                            </button>
+                            <div class="relative">
+                                <button onclick="toggleProfileDropdown()" class="flex items-center text-sm rounded-full focus:outline-none">
+                                    <span class="sr-only">Open user menu</span>
+                                    <div class="w-8 h-8 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold">JD</div>
+                                </button>
+                                <div id="profileDropdown" class="hidden absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 py-1 z-50">
+                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a>
+                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
+                                    <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
+            </nav>
+            <!-- Dashboard Content -->
+            <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                <!-- Stats Cards -->
+                <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+                    <div class="bg-white rounded-lg shadow p-6">
                         <div class="flex items-center">
+                            <div class="p-3 rounded-full bg-truismLight text-truismPrimary mr-4">
+                                <i class="fas fa-shopping-cart"></i>
                             </div>
                             <div>
+                                <p class="text-sm text-gray-500">Total Orders</p>
+                                <p class="text-2xl font-bold">24</p>
                             </div>
                         </div>
                     </div>
+                    <div class="bg-white rounded-lg shadow p-6">
+                        <div class="flex items-center">
+                            <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
+                                <i class="fas fa-truck"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-500">Pending Orders</p>
+                                <p class="text-2xl font-bold">5</p>
+                            </div>
                         </div>
                     </div>
+                    <div class="bg-white rounded-lg shadow p-6">
+                        <div class="flex items-center">
+                            <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
+                                <i class="fas fa-check-circle"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-500">Completed Orders</p>
+                                <p class="text-2xl font-bold">18</p>
+                            </div>
                         </div>
                     </div>
+                    <div class="bg-white rounded-lg shadow p-6">
+                        <div class="flex items-center">
+                            <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
+                                <i class="fas fa-heart"></i>
+                            </div>
+                            <div>
+                                <p class="text-sm text-gray-500">Wishlist Items</p>
+                                <p class="text-2xl font-bold">7</p>
+                            </div>
+                        </div>
                     </div>
                 </div>
+                <!-- Recent Orders -->
+                <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
+                    <div class="px-6 py-4 border-b border-gray-200">
+                        <div class="flex items-center justify-between">
+                            <h2 class="text-lg font-semibold text-gray-900">Recent Orders</h2>
+                            <a href="#" class="text-sm font-medium text-truismPrimary hover:text-truismDark">View All</a>
                         </div>
                     </div>
+                    <div class="divide-y divide-gray-200">
+                        <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center">
+                                    <div class="mr-4">
+                                        <span class="order-status-pending px-2 py-1 text-xs font-medium rounded-full">Pending</span>
+                                    </div>
+                                    <div>
+                                        <p class="font-medium">Order #TRU-2023-0012</p>
+                                        <p class="text-sm text-gray-500">Premium Pigeon Peas (10kg)</p>
+                                    </div>
+                                </div>
+                                <div class="text-right">
+                                    <p class="font-medium">$25.00</p>
+                                    <p class="text-sm text-gray-500">Placed on 15 Jun 2023</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center">
+                                    <div class="mr-4">
+                                        <span class="order-status-shipped px-2 py-1 text-xs font-medium rounded-full">Shipped</span>
+                                    </div>
+                                    <div>
+                                        <p class="font-medium">Order #TRU-2023-0011</p>
+                                        <p class="text-sm text-gray-500">Organic Turmeric Powder (5kg)</p>
+                                    </div>
+                                </div>
+                                <div class="text-right">
+                                    <p class="font-medium">$26.00</p>
+                                    <p class="text-sm text-gray-500">Placed on 12 Jun 2023</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
+                            <div class="flex items-center justify-between">
+                                <div class="flex items-center">
+                                    <div class="mr-4">
+                                        <span class="order-status-delivered px-2 py-1 text-xs font-medium rounded-full">Delivered</span>
+                                    </div>
+                                    <div>
+                                        <p class="font-medium">Order #TRU-2023-0010</p>
+                                        <p class="text-sm text-gray-500">White Sesame Seeds (15kg)</p>
+                                    </div>
+                                </div>
+                                <div class="text-right">
+                                    <p class="font-medium">$56.25</p>
+                                    <p class="text-sm text-gray-500">Placed on 8 Jun 2023</p>
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
+                <!-- Recommended Products -->
+                <div class="bg-white rounded-lg shadow overflow-hidden">
+                    <div class="px-6 py-4 border-b border-gray-200">
+                        <div class="flex items-center justify-between">
+                            <h2 class="text-lg font-semibold text-gray-900">Recommended Products</h2>
+                            <a href="#" class="text-sm font-medium text-truismPrimary hover:text-truismDark">Browse All</a>
+                        </div>
                     </div>
+                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 p-6">
+                        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-smooth">
+                            <div class="relative">
+                                <img src="https://images.unsplash.com/photo-1605000797499-95a51c5269ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1471&q=80" alt="Green Grams" class="w-full h-40 object-cover">
+                                <button class="absolute top-2 right-2 text-gray-400 hover:text-red-500">
+                                    <i class="far fa-heart text-xl"></i>
+                                </button>
                             </div>
+                            <div class="p-4">
+                                <h3 class="font-medium text-gray-900 mb-1">Green Grams (Whole)</h3>
+                                <p class="text-truismPrimary font-bold mb-2">$2.80/kg</p>
+                                <div class="flex justify-between items-center">
+                                    <button class="bg-truismPrimary text-white px-3 py-1 rounded text-sm font-medium hover:bg-truismDark transition-smooth">
+                                        Add to Cart
+                                    </button>
+                                    <div class="text-truismSecondary text-sm">
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star-half-alt"></i>
+                                    </div>
+                                </div>
                             </div>
                         </div>
+                        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-smooth">
+                            <div class="relative">
+                                <img src="https://images.unsplash.com/photo-1603048719537-93a64b424f0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Chili Powder" class="w-full h-40 object-cover">
+                                <button class="absolute top-2 right-2 text-gray-400 hover:text-red-500">
+                                    <i class="far fa-heart text-xl"></i>
+                                </button>
                             </div>
+                            <div class="p-4">
+                                <h3 class="font-medium text-gray-900 mb-1">Chili Powder</h3>
+                                <p class="text-truismPrimary font-bold mb-2">$6.40/kg</p>
+                                <div class="flex justify-between items-center">
+                                    <button class="bg-truismPrimary text-white px-3 py-1 rounded text-sm font-medium hover:bg-truismDark transition-smooth">
+                                        Add to Cart
+                                    </button>
+                                    <div class="text-truismSecondary text-sm">
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                    </div>
+                                </div>
                             </div>
                         </div>
+                        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-smooth">
+                            <div class="relative">
+                                <img src="https://images.unsplash.com/photo-1594282486555-1b5c6e0e63f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Sunflower Seeds" class="w-full h-40 object-cover">
+                                <button class="absolute top-2 right-2 text-gray-400 hover:text-red-500">
+                                    <i class="far fa-heart text-xl"></i>
+                                </button>
                             </div>
+                            <div class="p-4">
+                                <h3 class="font-medium text-gray-900 mb-1">Sunflower Seeds</h3>
+                                <p class="text-truismPrimary font-bold mb-2">$4.20/kg</p>
+                                <div class="flex justify-between items-center">
+                                    <button class="bg-truismPrimary text-white px-3 py-1 rounded text-sm font-medium hover:bg-truismDark transition-smooth">
+                                        Add to Cart
+                                    </button>
+                                    <div class="text-truismSecondary text-sm">
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="far fa-star"></i>
+                                    </div>
+                                </div>
                             </div>
                         </div>
+                        <div class="bg-white border border-gray-200 rounded-lg overflow-hidden hover:shadow-md transition-smooth">
+                            <div class="relative">
+                                <img src="https://images.unsplash.com/photo-1603569283847-aa6f0c5d9d5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pigeon Peas" class="w-full h-40 object-cover">
+                                <button class="absolute top-2 right-2 text-gray-400 hover:text-red-500">
+                                    <i class="far fa-heart text-xl"></i>
+                                </button>
+                            </div>
+                            <div class="p-4">
+                                <h3 class="font-medium text-gray-900 mb-1">Premium Pigeon Peas</h3>
+                                <p class="text-truismPrimary font-bold mb-2">$2.50/kg</p>
+                                <div class="flex justify-between items-center">
+                                    <button class="bg-truismPrimary text-white px-3 py-1 rounded text-sm font-medium hover:bg-truismDark transition-smooth">
+                                        Add to Cart
+                                    </button>
+                                    <div class="text-truismSecondary text-sm">
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star"></i>
+                                        <i class="fas fa-star-half-alt"></i>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
+            </main>
         </div>
     </div>
+    <!-- Seller Dashboard (Hidden by default) -->
+    <div id="sellerDashboard" class="hidden">
+        <div class="flex">
+            <!-- Sidebar -->
+            <div class="bg-white shadow-md w-64 fixed dashboard-nav">
+                <div class="p-4 border-b border-gray-200">
+                    <img src="https://truismhl.com/wp-content/uploads/2023/05/logo.png" alt="Truism Logo" class="h-10">
                 </div>
+                <div class="p-4">
+                    <div class="flex items-center mb-6">
+                        <div class="w-12 h-12 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold mr-3">MF</div>
+                        <div>
+                            <p class="font-medium">Mary Farmer</p>
+                            <p class="text-sm text-gray-500">Seller Account</p>
+                        </div>
+                    </div>
+                    <div class="mb-8">
+                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Main</p>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded active-tab">
+                            <i class="fas fa-tachometer-alt mr-2"></i> Dashboard
+                        </a>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                            <i class="fas fa-box-open mr-2"></i> Products
+                        </a>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                            <i class="fas fa-shopping-cart mr-2"></i> Orders
+                        </a>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                            <i class="fas fa-chart-line mr-2"></i> Analytics
+                        </a>
+                    </div>
+                    <div class="mb-8">
+                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Management</p>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                            <i class="fas fa-users mr-2"></i> Customers
+                        </a>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                            <i class="fas fa-comments mr-2"></i> Reviews
+                        </a>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                            <i class="fas fa-truck mr-2"></i> Shipping
+                        </a>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                            <i class="fas fa-percentage mr-2"></i> Discounts
+                        </a>
+                    </div>
+                    <div class="mb-8">
+                        <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Account</p>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                            <i class="fas fa-store mr-2"></i> Store Profile
+                        </a>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                            <i class="fas fa-wallet mr-2"></i> Payouts
+                        </a>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100">
+                            <i class="fas fa-cog mr-2"></i> Settings
+                        </a>
+                    </div>
+                    <div>
+                        <a href="#" class="block py-2 px-3 mb-1 rounded hover:bg-gray-100 text-red-500">
+                            <i class="fas fa-sign-out-alt mr-2"></i> Logout
+                        </a>
+                    </div>
                 </div>
             </div>
+            <!-- Main Content -->
+            <div class="flex-1 ml-64">
+                <!-- Top Navigation -->
+                <nav class="bg-white shadow-sm">
+                    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                        <div class="flex justify-between h-16 items-center">
+                            <div class="flex items-center">
+                                <h1 class="text-xl font-semibold text-gray-900">Seller Dashboard</h1>
+                            </div>
+                            <div class="flex items-center space-x-4">
+                                <button class="relative text-gray-600 hover:text-truismPrimary">
+                                    <i class="fas fa-bell text-xl"></i>
+                                    <span class="absolute -top-1 -right-1 bg-truismSecondary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">5</span>
+                                </button>
+                                <div class="relative">
+                                    <button onclick="toggleProfileDropdown()" class="flex items-center text-sm rounded-full focus:outline-none">
+                                        <span class="sr-only">Open user menu</span>
+                                        <div class="w-8 h-8 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold">MF</div>
+                                    </button>
                                 </div>
                             </div>
                         </div>
                     </div>
+                </nav>
+                <!-- Dashboard Content -->
+                <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+                    <!-- Stats Cards -->
+                    <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
+                        <div class="bg-white rounded-lg shadow p-6">
+                            <div class="flex items-center">
+                                <div class="p-3 rounded-full bg-truismLight text-truismPrimary mr-4">
+                                    <i class="fas fa-money-bill-wave"></i>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500">Total Revenue</p>
+                                    <p class="text-2xl font-bold">$1,245.80</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-white rounded-lg shadow p-6">
+                            <div class="flex items-center">
+                                <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4">
+                                    <i class="fas fa-shopping-cart"></i>
+                                </div>
+                                <div>
+                                    <p class="text-sm text-gray-500">Total Orders</p>
+                                    <p class="text-2xl font-bold">42</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-white rounded-lg shadow p-6">
+                            <div class="flex items-center">
+                                <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4">
+                                    <i class="fas fa-box-open"></i>
+                                </div>
                                 <div>
+                                    <p class="text-sm text-gray-500">Products Listed</p>
+                                    <p class="text-2xl font-bold">8</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-white rounded-lg shadow p-6">
+                            <div class="flex items-center">
+                                <div class="p-3 rounded-full bg-purple-100 text-purple-600 mr-4">
+                                    <i class="fas fa-star"></i>
                                 </div>
                                 <div>
+                                    <p class="text-sm text-gray-500">Average Rating</p>
+                                    <p class="text-2xl font-bold">4.6</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Recent Orders -->
+                    <div class="bg-white rounded-lg shadow overflow-hidden mb-8">
+                        <div class="px-6 py-4 border-b border-gray-200">
+                            <div class="flex items-center justify-between">
+                                <h2 class="text-lg font-semibold text-gray-900">Recent Orders</h2>
+                                <a href="#" class="text-sm font-medium text-truismPrimary hover:text-truismDark">View All</a>
+                            </div>
+                        </div>
+                        <div class="overflow-x-auto">
+                            <table class="min-w-full divide-y divide-gray-200">
+                                <thead class="bg-gray-50">
+                                    <tr>
+                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Order ID</th>
+                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer</th>
+                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Products</th>
+                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
+                                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Action</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="bg-white divide-y divide-gray-200">
+                                    <tr class="hover:bg-gray-50">
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#TRU-2023-0042</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">John Doe</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Pigeon Peas (10kg)</td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span class="order-status-pending px-2 py-1 text-xs font-medium rounded-full">Pending</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$25.00</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                            <a href="#" class="text-truismPrimary hover:text-truismDark">View</a>
+                                        </td>
+                                    </tr>
+                                    <tr class="hover:bg-gray-50">
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#TRU-2023-0041</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sarah Smith</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Turmeric Powder (5kg)</td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span class="order-status-shipped px-2 py-1 text-xs font-medium rounded-full">Shipped</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$26.00</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                            <a href="#" class="text-truismPrimary hover:text-truismDark">View</a>
+                                        </td>
+                                    </tr>
+                                    <tr class="hover:bg-gray-50">
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#TRU-2023-0040</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">David Johnson</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Sesame Seeds (15kg)</td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span class="order-status-delivered px-2 py-1 text-xs font-medium rounded-full">Delivered</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$56.25</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                            <a href="#" class="text-truismPrimary hover:text-truismDark">View</a>
+                                        </td>
+                                    </tr>
+                                    <tr class="hover:bg-gray-50">
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">#TRU-2023-0039</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Emma Wilson</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Green Grams (8kg)</td>
+                                        <td class="px-6 py-4 whitespace-nowrap">
+                                            <span class="order-status-cancelled px-2 py-1 text-xs font-medium rounded-full">Cancelled</span>
+                                        </td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">$22.40</td>
+                                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
+                                            <a href="#" class="text-truismPrimary hover:text-truismDark">View</a>
+                                        </td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                    <!-- Product Performance -->
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
+                        <div class="bg-white rounded-lg shadow overflow-hidden">
+                            <div class="px-6 py-4 border-b border-gray-200">
+                                <h2 class="text-lg font-semibold text-gray-900">Top Selling Products</h2>
+                            </div>
+                            <div class="divide-y divide-gray-200">
+                                <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
+                                    <div class="flex items-center">
+                                        <img src="https://images.unsplash.com/photo-1603569283847-aa6f0c5d9d5c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Pigeon Peas" class="w-16 h-16 object-cover rounded mr-4">
+                                        <div class="flex-1">
+                                            <h3 class="font-medium">Premium Pigeon Peas</h3>
+                                            <p class="text-sm text-gray-500">Sold: 120kg | Revenue: $300.00</p>
+                                        </div>
+                                        <div class="text-truismSecondary">
                                             <i class="fas fa-star"></i>
                                             <i class="fas fa-star"></i>
                                             <i class="fas fa-star"></i>
                                             <i class="fas fa-star"></i>
                                             <i class="fas fa-star-half-alt"></i>
                                         </div>
                                     </div>
+                                </div>
+                                <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
+                                    <div class="flex items-center">
+                                        <img src="https://images.unsplash.com/photo-1596043756921-6b09789a9c36?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Turmeric Powder" class="w-16 h-16 object-cover rounded mr-4">
+                                        <div class="flex-1">
+                                            <h3 class="font-medium">Organic Turmeric Powder</h3>
+                                            <p class="text-sm text-gray-500">Sold: 85kg | Revenue: $442.00</p>
+                                        </div>
+                                        <div class="text-truismSecondary">
+                                            <i class="fas fa-star"></i>
+                                            <i class="fas fa-star"></i>
+                                            <i class="fas fa-star"></i>
+                                            <i class="fas fa-star"></i>
+                                            <i class="fas fa-star"></i>
                                         </div>
                                     </div>
+                                </div>
+                                <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
+                                    <div class="flex items-center">
+                                        <img src="https://images.unsplash.com/photo-1594282486555-1b5c6e0e63f1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1374&q=80" alt="Sesame Seeds" class="w-16 h-16 object-cover rounded mr-4">
+                                        <div class="flex-1">
+                                            <h3 class="font-medium">White Sesame Seeds</h3>
+                                            <p class="text-sm text-gray-500">Sold: 75kg | Revenue: $281.25</p>
+                                        </div>
+                                        <div class="text-truismSecondary">
+                                            <i class="fas fa-star"></i>
+                                            <i class="fas fa-star"></i>
+                                            <i class="fas fa-star"></i>
+                                            <i class="fas fa-star"></i>
+                                            <i class="far fa-star"></i>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-white rounded-lg shadow overflow-hidden">
+                            <div class="px-6 py-4 border-b border-gray-200">
+                                <h2 class="text-lg font-semibold text-gray-900">Recent Reviews</h2>
+                            </div>
+                            <div class="divide-y divide-gray-200">
+                                <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
+                                    <div class="flex items-start">
+                                        <div class="mr-4">
+                                            <div class="w-10 h-10 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold">JD</div>
+                                        </div>
+                                        <div class="flex-1">
+                                            <div class="flex items-center justify-between">
+                                                <h4 class="font-medium">John Doe</h4>
+                                                <div class="text-truismSecondary text-sm">
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="fas fa-star-half-alt"></i>
+                                                </div>
+                                            </div>
+                                            <p class="text-sm text-gray-600 mt-1">Premium Pigeon Peas</p>
+                                            <p class="text-gray-500 mt-2">"Excellent quality peas, very fresh and clean. Will definitely order again!"</p>
+                                            <p class="text-xs text-gray-400 mt-2">2 days ago</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
+                                    <div class="flex items-start">
+                                        <div class="mr-4">
+                                            <div class="w-10 h-10 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold">SS</div>
+                                        </div>
+                                        <div class="flex-1">
+                                            <div class="flex items-center justify-between">
+                                                <h4 class="font-medium">Sarah Smith</h4>
+                                                <div class="text-truismSecondary text-sm">
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="fas fa-star"></i>
+                                                </div>
+                                            </div>
+                                            <p class="text-sm text-gray-600 mt-1">Organic Turmeric Powder</p>
+                                            <p class="text-gray-500 mt-2">"The turmeric is very potent and fresh. Perfect for my health drinks. Highly recommend!"</p>
+                                            <p class="text-xs text-gray-400 mt-2">1 week ago</p>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="px-6 py-4 hover:bg-gray-50 transition-smooth">
+                                    <div class="flex items-start">
+                                        <div class="mr-4">
+                                            <div class="w-10 h-10 rounded-full bg-truismLight flex items-center justify-center text-truismPrimary font-bold">DJ</div>
+                                        </div>
+                                        <div class="flex-1">
+                                            <div class="flex items-center justify-between">
+                                                <h4 class="font-medium">David Johnson</h4>
+                                                <div class="text-truismSecondary text-sm">
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="fas fa-star"></i>
+                                                    <i class="far fa-star"></i>
+                                                </div>
+                                            </div>
+                                            <p class="text-sm text-gray-600 mt-1">White Sesame Seeds</p>
+                                            <p class="text-gray-500 mt-2">"Good quality seeds, but delivery took longer than expected."</p>
+                                            <p class="text-xs text-gray-400 mt-2">2 weeks ago</p>
+                                        </div>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
+                    <!-- Quick Actions -->
+                    <div class="bg-white rounded-lg shadow overflow-hidden">
+                        <div class="px-6 py-4 border-b border-gray-200">
+                            <h2 class="text-lg font-semibold text-gray-900">Quick Actions</h2>
+                        </div>
+                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6 p-6">
+                            <a href="#" class="bg-truismLight rounded-lg p-6 text-center hover:shadow-md transition-smooth">
+                                <div class="bg-truismPrimary w-16 h-16 rounded-full flex items-center justify-center text-white mx-auto mb-4">
+                                    <i class="fas fa-plus text-2xl"></i>
+                                </div>
+                                <h3 class="font-medium text-gray-900 mb-2">Add New Product</h3>
+                                <p class="text-sm text-gray-500">List a new agricultural product for sale</p>
+                            </a>
+                            <a href="#" class="bg-truismLight rounded-lg p-6 text-center hover:shadow-md transition-smooth">
+                                <div class="bg-truismPrimary w-16 h-16 rounded-full flex items-center justify-center text-white mx-auto mb-4">
+                                    <i class="fas fa-chart-line text-2xl"></i>
+                                </div>
+                                <h3 class="font-medium text-gray-900 mb-2">View Reports</h3>
+                                <p class="text-sm text-gray-500">Analyze your sales and performance</p>
+                            </a>
+                            <a href="#" class="bg-truismLight rounded-lg p-6 text-center hover:shadow-md transition-smooth">
+                                <div class="bg-truismPrimary w-16 h-16 rounded-full flex items-center justify-center text-white mx-auto mb-4">
+                                    <i class="fas fa-truck text-2xl"></i>
+                                </div>
+                                <h3 class="font-medium text-gray-900 mb-2">Manage Shipping</h3>
+                                <p class="text-sm text-gray-500">Update your shipping methods and rates</p>
+                            </a>
+                        </div>
+                    </div>
+                </main>
             </div>
         </div>
     </div>
+    <!-- Dashboard Toggle (For demo purposes) -->
+    <div class="fixed bottom-4 right-4 z-50">
+        <button onclick="toggleDashboard()" class="bg-truismPrimary text-white p-3 rounded-full shadow-lg hover:bg-truismDark transition-smooth">
+            <i class="fas fa-exchange-alt"></i>
+        </button>
+    </div>
+    <script>
+        // Toggle profile dropdown
+        function toggleProfileDropdown() {
+            const dropdown = document.getElementById('profileDropdown');
+            dropdown.classList.toggle('hidden');
         }
+        // Close dropdown when clicking outside
+        document.addEventListener('click', function(event) {
+            const dropdown = document.getElementById('profileDropdown');
+            if (!event.target.closest('.relative')) {
+                dropdown.classList.add('hidden');
             }
+        });
+        // For demo purposes - toggle between buyer and seller dashboards
+        function toggleDashboard() {
+            const sellerDashboard = document.getElementById('sellerDashboard');
+            sellerDashboard.classList.toggle('hidden');
         }
+        // Sample function to view product details
+        function viewProduct(id) {
+            alert('Viewing product with ID: ' + id);
+            // In a real application, this would open a modal or navigate to product page
         }
     </script>
 <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jcarnel/projects256" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>

prompts.txt CHANGED Viewed

@@ -1,3 +1,4 @@
 Truism connects informal processors, distributors, and retailers to their inventory needs while sourcing directly from smallholder farmers. We focus on the dry pulses, Herbs/Spiecs and select oil seeds. We building in the echnology and artificial intelligence to optimize the supply chain and ensure efficient inventory management> Build a website and a webapp with a dashboard
 Build a market place for Truism.
-https://truismhl.com/

 Truism connects informal processors, distributors, and retailers to their inventory needs while sourcing directly from smallholder farmers. We focus on the dry pulses, Herbs/Spiecs and select oil seeds. We building in the echnology and artificial intelligence to optimize the supply chain and ensure efficient inventory management> Build a website and a webapp with a dashboard
 Build a market place for Truism.
+https://truismhl.com/
+create a buyer dashboard and a seller dashboard