dushimec/Agro-link-rwanda

# Agro Link Rwanda - Mobile UI Preview A mobile-first agriculture marketplace app UI built with pure HTML, CSS, and minimal JavaScript. ## 🌾 About Agro Link Rwanda connects farmers directly with buyers across Rwanda, enabling easy product listing, ordering, and communication. ## 📱 Pages 1. **`index.html`** - Home page with product feed 2. **`product.html`** - Product details page 3. **`chat.html`** - Messaging interface 4. **`post-product.html`** - Farmer product posting form 5. **`dashboard.html`** - Farmer dashboard with stats and orders 6. **`login.html`** - Login/signup page 7. **`style.css`** - Shared styles ## 🎨 Design System ### Colors - **Primary Green**: `#22c55e` - Main accent color - **Dark Background**: `#07140c` - Main background - **Dark Secondary**: `#0b2817` - Secondary background - **Light Text**: `#f0fdf4` - Primary text color ### Features - ✅ Mobile-first responsive design (max-width: 420px) - ✅ Centered mobile frame with rounded corners and shadow - ✅ Bottom navigation bar (Home, Post, Orders, Profile) - ✅ Card-based layout with soft shadows - ✅ Rounded corners (12-18px) - ✅ Green primary buttons and outline secondary buttons - ✅ Emoji icons for visual appeal - ✅ Interactive elements with JavaScript ## 🚀 Getting Started Simply open `index.html` in your browser to view the app. ```bash # Open in default browser start index.html # Windows open index.html # macOS xdg-open index.html # Linux ``` Or use a local server: ```bash # Python 3 python -m http.server 8000 # Node.js (with http-server) npx http-server ``` Then navigate to `localhost` ## 📐 Mobile Frame The app uses a centered mobile frame that: - Displays at 420px max width on desktop - Scales to full width on mobile devices - Has rounded corners (24px) on desktop - Removes border radius on mobile for native feel ## 🔗 Navigation Flow ``` index.html (Home) ↓ product.html (Product Details) ↓ chat.html (Chat with Seller) post-product.html (Post Product) ↓ dashboa …