Minimalist Grocery Home

This prompt includes design specs extracted from this screen.

Convert this HTML into a Flutter UI screen. 
Create reusable components/widgets first, such as the search bar, category buttons, and product cards. 
Make it responsive by using Flutter's built-in responsive design features, such as the `MediaQuery` class and the `LayoutBuilder` widget. 
Design specs extracted from the HTML:
- Primary color: #0df20d
- Background light color: #f5f8f5
- Background dark color: #102210
- Font family: Manrope, sans-serif
- Font sizes: 10px, 12px, 14px, 16px, 18px, 20px, 22px, 24px, 26px, 28px
- Border radius values: 0.25rem, 0.5rem, 0.75rem, 9999px
- Padding: 1rem, 2rem, 3rem, 4rem, 5rem, 6rem, 8rem
- Shadows: shadow-2xl, shadow-md
- Gradients: none
[PASTE YOUR HTML CODE BELOW]

Open Cursor in your Flutter project. Paste the prompt, then paste your HTML below the [PASTE YOUR HTML CODE BELOW] line.

Cursor will generate Flutter UI to match this design.