Smart Irrigation System - Copy this React, Tailwind Component to your project
Design a modern mobile UI for a Smart Irrigation System. Follow these specifications for a clean and intuitive layout: 1. Header Section Top left: Add a hamburger menu icon. Center: "Good Morning!" in bold text. Below it, add the subtitle: "Optimize Your Farm Operations with Real Time Insights" in smaller gray text. Top right: Circular profile icon placeholder. Notification bell icon with a red dot (indicating unread notifications). 2. Main Card: Smart Irrigation System Card Layout: Title: "Smart Irrigation System" (aligned left, bold). Dropdown menu: Positioned just below the title, with options: "Manual," "Semi Auto," and "Full Auto." Circular Progress Bar: Positioned center in the card. Displays Soil Moisture (e.g., 45%) in bold text inside the circle. Include a droplet icon above the percentage for a visual cue. Use color coding: Blue: Adequate moisture. Yellow: Moderate. Red: Dry. 3. Weather Card Design a secondary card similar to the reference: Title: "Farm 1." Weather icon (sun/cloud/rain based on data). Large temperature display (e.g., "28°C"). Subtitle: "Feels like 26°C." Below it, include: "Heavy Rain Expected." 4. Data Representation Cards Add a row of small cards below the weather card to display key metrics like: Soil Data: Icon: A small soil patch icon. Label: "Soil Type: Sandy Loam." Moisture Levels: Icon: A droplet icon. Label: "Moisture: 45%." Irrigation Status: Icon: A water flow icon. Label: "Status: Manual." Use equal width cards with rounded corners, shadows, and a subtle gradient for the background. 5. Bottom Navigation Bar Add a fixed navigation bar at the bottom with these tabs: Dashboard (active, with a green indicator). Weather (cloud icon). Soil & Water (droplet icon). My Account (profile icon). Use modern flat icons and highlight the active tab with a bright green color. 6. Design Elements Color Scheme: Background: Light gray or white. Primary Buttons/Icons: Green (#28A745). Text: Black for titles. Gray for subtitles and secondary text. Cards: White with subtle drop shadows. Fonts: Use clean fonts like Poppins or Roboto. Bold for titles, regular for descriptions. Spacing: Ensure all cards and elements have sufficient padding for a clean layout. Keep consistent margins around cards.
