Smart Irrigation U I - Copy this React, Tailwind Component to your project
Design-a-sleek-and-modern-mobile-UI-for-a-Smart-Irrigation-System-based-on-the-following-specifications:-Header-Section:-Top-left:-A-hamburger-menu-icon.-Center:-"Good-Morning!"-with-a-subtitle:-"Optimize-Your-Farm-Operations-with-Real-Time-Insights"-(small,-gray-text).-Top-right:-A-circular-profile-picture-placeholder-with-a-notification-dot-or-bell-icon-next-to-it.-Main-Feature-Card:-Title:-"Smart-Irrigation-System."-Dropdown-button:-Include-a-dropdown-menu-with-the-following-options:-"Manual,"-"Semi-Auto,"-and-"Full-Auto."-Place-this-button-below-the-title-and-center-it-within-the-card.-Soil-moisture-data-display:-Use-a-circular-gauge-or-progress-bar-showing-current-soil-moisture-(e.g.,-45%).-Include-a-label:-"Soil-Moisture:-45%"-in-bold-text.-Add-an-icon-for-soil-moisture-(e.g.,-a-droplet).-Weather-Widget-(Optional):-Include-a-small-weather-card-similar-to-the-image:-Icon-for-weather-(sun,-rain,-or-cloud).-Location-(e.g.,-"Farm-1"-or-city-name).-Temperature-in-large-font-(e.g.,-"28°C")-with-"Feels-like-26°C"-in-smaller-font.-Add-weather-conditions-(e.g.,-"Heavy-Rain")-below-the-temperature.-Other-Details-(Navigation):-Bottom-navigation-bar-with-these-four-tabs:-Dashboard-(active-tab-with-a-green-indicator).-Weather-(cloud-icon).-Soil-&-Water-(droplet-icon).-My-Account-(profile-icon).-Use-subtle-shadows-and-flat-icons-for-a-modern-feel.-Design-Elements:-Color-scheme:-Background:-Clean-white-or-light-gray.-Buttons:-Primary-green-(#28A745)-for-actions-like-"Export."-Text:-Dark-gray-for-titles,-light-gray-for-descriptions.-Font:-Minimal-and-professional-(e.g.,-Poppins-or-Roboto).-Rounded-corners-for-all-cards-and-buttons.-Layout:-Ensure-a-clean-and-structured-layout-with-sufficient-padding-and-spacing-between-sections.-All-interactive-elements-(dropdown,-tabs)-should-be-tappable-and-responsive.
