Replace the emoji-based feature cards in, Chat Interface Redesign

[nngeek195]

UI/UX Redesign: Features & Chat Interface

This update transforms the landing page's Features Section from a basic icon-based layout to a high-fidelity, image-centric design. The focus is on increasing professional trust and "Food Visibility" for the marketplace.

---

🎯 Project Goals

• Modernize Features: Replace static emojis with high-resolution background images.

• Enhance Visibility: Use dynamic overlays to highlight fresh produce and agricultural assets.

• Upgrade Chat: Implement a specialized Glassmorphism UI for a sleek communication experience.

---

🖼️ Feature Section Redesign

We have shifted to a "Commercial-Grade" card system. Each card now features a high-quality background image paired with modern typography.

Key Visual Assets

• Farmer Portal: farmer_card_bg.jpg — Showcasing the origin of the products.

• Buyer Market: buyer_card_bg.jpg — Focusing on trade and fresh stock.

• Equipment: equipment_card_bg.jpg — Highlighting modern agritech tools.

• Groceries: grocery_card_bg.jpg — Maximum Food Visibility with vibrant organic produce.

---

💬 Chat Interface Modernization

The chat module has been completely refactored to support a premium, translucent aesthetic.

• Glassmorphism: Uses backdrop-filter: blur(10px) for a modern, layered feel.

• Performance: Decoupled all styles from chat.html into a dedicated chat.css file.

• Responsiveness: Rebuilt using CSS Grid to ensure a perfect layout on mobile and desktop.

---

🛠️ Technical Implementation

File Changes

File | Status | Description -- | -- | -- index.html | [MODIFY] | Replaced feature-icon divs with content containers for text overlays. style.css | [MODIFY] | Implemented .feature-card background logic and hover effects. chat.html | [MODIFY] | Restructured DOM for external CSS and shared footer integration. chat.css | [NEW] | Comprehensive styles for glass effects and chat bubble geometry.

CSS Overlay Logic

CSS

/* Ensures text is readable over high-visibility food images */
.feature-card {
  background-size: cover;
  background-position: center;
  position: relative;
}
.feature-card::after {

content: '';

position: absolute;

inset: 0;

background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.8));

}

[vercel]

@nngeek195 is attempting to deploy a commit to the Om Roy's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thanks for creating a PR for your Issue! ☺️

We'll review it as soon as possible.
In the meantime, please double-check the file changes and ensure that all commits are accurate.

If there are any unresolved review comments, feel free to resolve them. 🙌🏼

[omroy07]

Conflict